CKEditor 4
Contribute to this guideReport an issue

guideDefault Image Plugin

By default the image feature is provided through the Image plugin that is included in the Standard and Full presets available from the official CKEditor Download site. You can also add it to your custom build with online builder.

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

  • It allows for pixel-perfect alignment of images inside the editor content by setting horizontal and vertical whitespace.
  • It supports left and right image alignment as well as setting image border.
  • It provides image preview.
  • It supports adding links to images through the dedicated Link tab directly in the Image Properties dialog.
  • It can be integrated with a file manager of your choice such as CKFinder for image upload and storage support.

If you are looking for more modern image support with a clean UI and features such as image captions, drag and drop positioning, click and drag resizing, image alignment (including centering) with inline styles or CSS classes, custom image styles or cloud storage support with optimized images and responsive markup, try Enhanced Image and Easy Image plugins.

Below you can see a document with an image inserted into the editor content with the default Image plugin.

Images inserted into CKEditor content with the Image plugin

# File Manager Integration

The Image plugin can be integrated with a file browser like CKFinder. Thanks to this you will be able to upload your images to the server or browse the server for images to be inserted into the editor content.

Below you can see the plugin’s Image Properties dialog window with the file browser integrated. The Browse Server button as well as the Upload tab will appear.

File manager integrated with the Image Properties dialog

# Image Plugin Demo

See the working “Default Image Plugin” sample that showcases the Image plugin with all its capabilities.

Refer to the following resources for more information about image support and upload:

  • Enhanced Image offers a clean UI with image captions, drag and drop positioning, click and drag resizing and file manager integration.
  • Easy Image lets you insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN.
  • File Manager Integration explains how to enable image upload.