@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.

Demo

Check out the demos in the image feature guides.

Documentation

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

Installation

npm install ckeditor5

License

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.