Contribute to this guideReport an issue

Enhanced Image Plugin Documentation

The optional Enhanced Image plugin, introduced in CKEditor 4.3, supports inserting images into the editor content. It provides the following features when compared to the classic Image plugin that is available by default in CKEditor distributions:

  • It allows for adding image captions (that will not be separated from the image when its location changes).
  • It has all advantages of widgets, i.e. you can treat the image and its caption as one entity and select, delete, or move it in the editor content area as a whole.
  • It supports drag and drop for changing the image position.
  • It provides image alignment, including centering, with inline styles or CSS classes.
  • It includes hassle-free "click and drag" resizing.
  • It can be integrated with a file manager of your choice such as CKFinder for image upload and storage support.

When the Enhanced Image plugin is enabled, the   button is automatically added to the toolbar. Once clicked, it opens the Image Properties dialog window that replaces the one available in the default Image plugin and lets you configure the captioned image.

A few configuration options are available to fine-tune this feature, including making the alternative text mandatory, adjusting the alignment style to use classes instead of inline styles or setting a custom CSS class for the captioned image. Refer to the Enhanced Image Plugin article to learn more about this feature.

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 to insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN, try Easy Image.

Related Features

Get Sample Source Code

  • Enhanced Image Plugin
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Enhanced Image Plugin</title>
      <script src="https://cdn.ckeditor.com/4.11.1/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>
        CKEDITOR.replace('editor1', {
          extraPlugins: 'image2,uploadimage',
    
          toolbar: [{
              name: 'clipboard',
              items: ['Undo', 'Redo']
            },
            {
              name: 'styles',
              items: ['Styles', 'Format']
            },
            {
              name: 'basicstyles',
              items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
            },
            {
              name: 'paragraph',
              items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
            },
            {
              name: 'links',
              items: ['Link', 'Unlink']
            },
            {
              name: 'insert',
              items: ['Image', 'Table']
            },
            {
              name: 'tools',
              items: ['Maximize']
            },
            {
              name: 'editing',
              items: ['Scayt']
            }
          ],
    
          // Configure your file manager integration. This example uses CKFinder 3 for PHP.
          filebrowserBrowseUrl: '/apps/ckfinder/3.4.4/ckfinder.html',
          filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.4/ckfinder.html?type=Images',
          filebrowserUploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Files',
          filebrowserImageUploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Images',
    
          // Upload dropped or pasted images to the CKFinder connector (note that the response type is set to JSON).
          uploadUrl: '/apps/ckfinder/3.4.4/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
    
          // Reduce the list of block elements listed in the Format drop-down to the most commonly used.
          format_tags: 'p;h1;h2;h3;pre',
          // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
          removeDialogTabs: 'image:advanced;link:advanced',
    
          height: 450
        });
      </script>
    </body>
    
    </html>