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

guideInstallation

The vast majority of image-related features are available in all predefined builds and require no additional installation. If you want to change the default configuration or create a custom editor build, you can enable image-related features 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, ImageCaption, ImageResize, ImageStyle, ImageToolbar } from '@ckeditor/ckeditor5-image';
import { LinkImage } from '@ckeditor/ckeditor5-link';

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 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 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 at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image.