@ckeditor/ckeditor5-image

What is @ckeditor/ckeditor5-image?

@ckeditor/ckeditor5-image is a plugin for CKEditor 5 that provides a set of features for working with images in the editor. It allows users to insert, resize, and style images within the content they are editing.

What are @ckeditor/ckeditor5-image's main functionalities?

Image Insertion

This feature allows users to insert images into the editor. The code sample demonstrates how to configure CKEditor 5 with the necessary plugins to enable image insertion.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, ImageUpload ], toolbar: [ 'imageUpload' ] })

Image Resizing

This feature allows users to resize images within the editor. The code sample shows how to configure the editor to include image resizing options in the toolbar.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, ImageUpload ], image: { resizeOptions: [ { name: 'resizeImage:original', value: null, icon: 'original' }, { name: 'resizeImage:50', value: '50', icon: 'medium' }, { name: 'resizeImage:75', value: '75', icon: 'large' } ], toolbar: [ 'resizeImage:50', 'resizeImage:75', 'resizeImage:original' ] } })

Image Styling

This feature allows users to apply different styles to images, such as aligning them to the left, center, or right. The code sample demonstrates how to configure the editor to include image styling options in the toolbar.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, ImageUpload ], image: { styles: [ 'alignLeft', 'alignCenter', 'alignRight' ], toolbar: [ 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight' ] } })

Image Caption

This feature allows users to add captions to images. The code sample shows how to configure the editor with the ImageCaption plugin to enable this functionality.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, ImageUpload ], toolbar: [ 'imageUpload' ] })

Image Upload

This feature allows users to upload images directly into the editor. The code sample demonstrates how to configure the editor to support image uploads with specific file types.

ClassicEditor.create(document.querySelector('#editor'), { plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, ImageUpload ], toolbar: [ 'imageUpload' ], image: { upload: { types: [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff' ] } } })

Other packages similar to @ckeditor/ckeditor5-image

quill-image-resize-module

The quill-image-resize-module is a plugin for the Quill rich text editor that provides image resizing functionality. It allows users to resize images by dragging the corners. Compared to @ckeditor/ckeditor5-image, it is more focused on resizing and does not offer as many built-in features for styling or captioning images.

tinymce

TinyMCE is a popular rich text editor that includes a variety of plugins for handling images, such as image insertion, resizing, and styling. It offers a comprehensive set of features similar to @ckeditor/ckeditor5-image, but it is a different editor with its own configuration and plugin system.

froala-editor

Froala Editor is another rich text editor that provides extensive image handling capabilities, including insertion, resizing, styling, and captioning. It offers a user-friendly interface and a wide range of features comparable to @ckeditor/ckeditor5-image.

README

CKEditor 5 image feature

This package implements the image feature for CKEditor 5. The feature is introduced in a granular form implemented by a couple of plugins.

Installation

This plugin is part of the ckeditor5 package. Install the whole package to use it.

npm install ckeditor5

Create free account

If you want to check full CKEditor 5 capabilities, sign up for a free non-commitment 14-day trial.

Demo

Check out the demos in the image feature guides.

Documentation

See the @ckeditor/ckeditor5-image package page in CKEditor 5 documentation.

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.

Changelog

45.1.0 (May 14, 2025)

We are happy to announce the release of CKEditor 5 v45.1.0.

Release highlights

Typing Improvements

The typing behavior has been improved for plain text typing. This adjustment allows the web browser to handle text insertion before the editor processes it, enhancing typing reliability across various scenarios, especially on Safari and iOS devices. Issues related to track changes, autocorrect, automatic text replacement, and other input methods have been addressed.

Track Changes Enhancements

A new method to start a "tracking session" has been introduced, preventing automatic merging of adjacent suggestions. This allows for more precise control over individual changes, catering to workflows that require selective acceptance of edits.

Miscellaneous improvements

• Sticky toolbars and balloons are now better aligned with the visual viewport on iOS and Safari, ensuring correct positioning when zooming.
• The fullscreen plugin has been improved to maintain scroll position when exiting fullscreen, avoiding unexpected jumps on smooth-scrolling pages. Layout consistency has been refined by adjusting margins and editable width. Errors related to the Content minimap plugin in fullscreen mode have also been resolved.
• Introduced a fix which ensures that the data-author-id and data-suggestion attributes are preserved in non-block suggestions when retrieving data with showSuggestionHighlights: true.
• We improved the algorithm for images detection in the Paste from Office feature, in scenarios of mixed local and online images from Microsoft Word. Paste no longer causes some images not to appear.