@ckeditor/ckeditor5-image
Advanced tools
@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.
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' ] } } })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 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 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.
This package implements the image feature for CKEditor 5. The feature is introduced in a granular form implemented by a couple of plugins.
This plugin is part of the ckeditor5 package. Install the whole package to use it.
npm install ckeditor5
If you want to check full CKEditor 5 capabilities, sign up for a free non-commitment 14-day trial.
Check out the demos in the image feature guides.
See the @ckeditor/ckeditor5-image package page in CKEditor 5 documentation.
Licensed under a dual-license model, this software is available under:
For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.
44.3.0 (March 5, 2025)
We are happy to announce the release of CKEditor 5 v44.3.0.
This release brings a couple of minor improvements and bug fixes:
rel attribute. The fix happened so deep in the engine that we improved the overall performance of the editor slightly as well.EmptyBlock plugin: From now on, new plugin prevents adding to the output data of blocks, works similarly to the fillEmptyBlocks configuration in CKEditor 4.<hr> element in the General HTML Support plugin enhanced: attributes of the <hr> element are now properly preserved if configuration allows it.For more details, see the changelog below.
FAQs
Image feature for CKEditor 5.
The npm package @ckeditor/ckeditor5-image receives a total of 368,799 weekly downloads. As such, @ckeditor/ckeditor5-image popularity was classified as popular.
We found that @ckeditor/ckeditor5-image demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.