Inserting images into content created with CKEditor is a very common task. CKEditor 5 introduced a totally new way of handling images, with strong focus on the end user experience. The goal is to make this an effortless and intuitive task.
In a properly configured editor, there are several ways for the end user to insert images:
Excluding the last option, all other ways require the image to be uploaded to a server, which will be the one responsible for providing the image URL used by CKEditor to display the image in the document.
The image insertion, therefore, is made of a few steps, which are transparent to the end user:
To make the above process possible, an image upload plugin (such as {@link module:easy-image/easyimage~EasyImage}) must be available. Such plugin will handle both the upload and URL returning steps in the above workflow.
Another great feature introduced with CKEditor 5 is the ability to have responsive images in the content. With a single image upload, several optimized versions of that image are created after upload, for different size of displays. All this is totally transparent to the end user who uploaded the image.
Be sure to use image upload plugins with support for responsive images to enjoy this important additional benefit. Easy Image has support for responsive images out of the box, too.
To make enabling image upload in CKEditor 5 a breeze, by default all builds include the {@link module:easy-image/easyimage~EasyImage EasyImage plugin}, which integrates with the Easy Image service provided by CKEditor Cloud Services. Enabling it is straightforward and the results are immediate:
Configure CKEditor (see {@link module:cloud-services/cloudservices~CloudServicesConfig CloudServicesConfig}):
ClassicEditor
.create( document.querySelector( '#editor' ), {
cloudServices: {
tokenUrl: 'https://example.com/cs-token-endpoint',
uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
}
} )
.then( ... )
.catch( ... );
This is all. At this point, image upload will be automatically enabled in your application.
If you're having troubles in setting up Easy Image, please contact us.
The demo below uses the {@link builds/guides/overview#classic-editor Classic editor} configured (like above) to use the Easy Image service provided by CKEditor Cloud Services:
{@snippet build-classic-source}
{@snippet features/image-upload}
See the {@link features/image Image feature} guide to learn more about handling images in CKEditor 5.