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 4 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.

<h1>Essential things to think about before starting a blog</h1>
				<figure class="image" style="float:right;"><img alt="A picture of wooden spoons with spices and herbs in them." src="assets/image2/spoons.jpg" width="400px"/>
					<figcaption>It takes several ingredients to create a delicious blog.</figcaption>
				</figure>
				It has been exactly 3 years since I wrote my first blog series entitled “Flavorful Tuscany”, but starting it was definitely not easy. Back then, I didn’t know much about blogging, let alone think that one day it could become my full-time job. Even though I had many recipes and food-related stories to tell, it never crossed my mind that I could be sharing them with the whole world
				I am now a full-time blogger and the curator of the <a href="https://ckeditor.com/ckeditor-4/#">Simply delicious newsletter</a>, sharing stories about traveling and cooking, as well as tips on how to run a successful blog.
				If you are tempted by the idea of creating your own blog, please think about the following:
				<ul>
					<li>Your story (what do you want to tell your audience)</li>
					<li>Your audience (who do you write for)</li>
					<li>Your blog name and design</li>
				</ul>
				After you get your head around these 3 essentials, all you have to do is grab your keyboard and the rest will follow.

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.25.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>
    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.5/ckfinder.html',
      filebrowserImageBrowseUrl: '/apps/ckfinder/3.4.5/ckfinder.html?type=Images',
      filebrowserUploadUrl: '/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
      filebrowserImageUploadUrl: '/apps/ckfinder/3.4.5/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.5/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,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>