CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Easy Image Plugin Documentation

The optional Easy Image plugin, introduced in CKEditor 4.9, supports uploading and inserting images into the editor content. It provides the following features when compared to two alternative image plugins, the default Image plugin and the optional Enhanced Image plugin:

  • It allows for adding image captions (that will not be separated from the image when its location changes).
  • It allows for uploading images to CKEditor Cloud Services that optimizes images by rescaling them and compressing, resulting in smaller sizes and faster download times.
  • It produces responsive markup, so inserted images are suitable for a wide range of devices (including mobile ones).
  • It allows for adding custom styles for inserted images.
  • It uses a customizable balloon toolbar for every image.
  • It does not produce any content reflow, resulting in smoother and better user experience.
  • Images uploaded to CKEditor Cloud Services are stored in the cloud and delivered through a blazing-fast CDN.

A few configuration options are available to fine-tune this feature, including adding custom styles, customizing the image widget's toolbar or setting a custom CSS class for the widget. Refer to the Easy Image Plugin article to learn more about this feature.

Note: The example below uses some configuration options mentioned above to add additional image styles (pink and blue gradient) with respective balloon toolbar buttons and context menu entries.

Image Optimization

Easy Image guarantees that all images inserted into your content are responsive. With a single image upload, several optimized versions of the image are created after upload by CKEditor Cloud Services, for different sizes of displays. All this is transparent to the end user who uploaded the image. Rescaled and optimized images are delivered through a CDN.

Please upload some image to the editor above to see the level of optimization for a number of popular device types.

If you are looking for pixel-perfect image alignment with vertical and horizotal whitespace, configurable image border and file manager integration, try the default Image plugin. If you need more modern image support with features such as image captions, drag and drop positioning, click and drag resizing, image alignment (including centering) with inline styles or CSS classes and custom image styles, but without cloud storage support with optimized images and responsive markup, try Enhanced Image.

Related Features

Get Sample Source Code

  • Easy Image Plugin 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Easy Image Plugin</title>
  <script src="https://cdn.ckeditor.com/4.24.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    // Don't forget to add CSS for your custom styles.
    CKEDITOR.addCss('figure[class*=easyimage-gradient]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }' +
      'figure[class*=easyimage-gradient] figcaption { position: relative; z-index: 2; }' +
      '.easyimage-gradient-1::before { background-image: linear-gradient( 135deg, rgba( 115, 110, 254, 0 ) 0%, rgba( 66, 174, 234, .72 ) 100% ); }' +
      '.easyimage-gradient-2::before { background-image: linear-gradient( 135deg, rgba( 115, 110, 254, 0 ) 0%, rgba( 228, 66, 234, .72 ) 100% ); }');

    CKEDITOR.replace('editor1', {
      extraPlugins: 'easyimage',
      removePlugins: 'image',
      removeDialogTabs: 'link:advanced',
      toolbar: [{
          name: 'document',
          items: ['Undo', 'Redo']
        },
        {
          name: 'styles',
          items: ['Format']
        },
        {
          name: 'basicstyles',
          items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
        },
        {
          name: 'paragraph',
          items: ['NumberedList', 'BulletedList']
        },
        {
          name: 'links',
          items: ['Link', 'Unlink']
        },
        {
          name: 'insert',
          items: ['EasyImageUpload']
        }
      ],
      height: 630,
      cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
      // Note: this is a token endpoint to be used for CKEditor 4 samples only. Images uploaded using this token may be deleted automatically at any moment.
      // To create your own token URL please visit https://ckeditor.com/ckeditor-cloud-services/.
      cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
      easyimage_styles: {
        gradient1: {
          group: 'easyimage-gradients',
          attributes: {
            'class': 'easyimage-gradient-1'
          },
          label: 'Blue Gradient',
          icon: 'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/easyimage/icons/gradient1.png',
          iconHiDpi: 'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/easyimage/icons/hidpi/gradient1.png'
        },
        gradient2: {
          group: 'easyimage-gradients',
          attributes: {
            'class': 'easyimage-gradient-2'
          },
          label: 'Pink Gradient',
          icon: 'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/easyimage/icons/gradient2.png',
          iconHiDpi: 'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/easyimage/icons/hidpi/gradient2.png'
        },
        noGradient: {
          group: 'easyimage-gradients',
          attributes: {
            'class': 'easyimage-no-gradient'
          },
          label: 'No Gradient',
          icon: 'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/easyimage/icons/nogradient.png',
          iconHiDpi: 'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/easyimage/icons/hidpi/nogradient.png'
        }
      },
      easyimage_toolbar: [
        'EasyImageFull',
        'EasyImageSide',
        'EasyImageGradient1',
        'EasyImageGradient2',
        'EasyImageNoGradient',
        'EasyImageAlt'
      ],
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>