CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideInstallation

The vast majority of image-related features is available out-of-the-box in all ready-to-use editor builds and does not require additional installation steps. If the default configuration does not match your needs or you want to create a custom editor build you can add image features to your rich-text editor by installing the @ckeditor/ckeditor5-image package:

npm install --save @ckeditor/ckeditor5-image

You may want to install the @ckeditor/ckeditor5-link package if you want to use the LinkImage plugin in your editor.

Next add the plugins that you need to your plugin list. You also need to set the desired image toolbar items. Notice the separators used to organize the toolbar.

import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage ],
        image: {
            toolbar: [
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative',
                '|',
                'linkImage'
            ]
        }
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Inline and block images

Inline images can be inserted in the middle of a paragraph or a link just like a regular text. Block images, on the other hand, can be inserted only between other blocks like paragraphs, tables or media. Being larger and existing as a standalone content, block images can also have individual captions. Other than that, both types of images can be resized, linked, etc…

By default, the Image plugin available in all ready-to-use editor builds provides support for both inline and block images, working as a glue for ImageInline and ImageBlock plugins:

Loaded plugin Available features
Block images (with captions) Inline images
Image (default) ✅  yes ✅  yes
ImageBlock ✅  yes ❌  no
ImageInline ❌  no ✅  yes

Up to CKEditor 5 v[27.1.0], only block images were supported. The support for inline images started in v[28.0.0] in all editor builds loading the Image plugin.

If your integration depends on a ready–to–use editor build and you want to take advantage of updated CKEditor 5 but without the support for inline images (e.g. to maintain content compatibility), check out the official migration guide that will help you configure the editor.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.