Security News
TC39 Advances 10+ ECMAScript Proposals: Key Features to Watch
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
@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.
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.
The npm package @ckeditor/ckeditor5-image receives a total of 442,939 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
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.
Security News
A senior white house official is urging insurers to stop covering ransomware payments, indicating possible stricter regulations to deter cybercrime.