@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.
Check out the demos in the image feature guides.
See the @ckeditor/ckeditor5-image package page in CKEditor 5 documentation.
npm install ckeditor5
Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file or https://ckeditor.com/legal/ckeditor-oss-license.
FAQs
Image feature for CKEditor 5.
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 1 open source maintainer 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.