Inserting images into content created with CKEditor is a very common 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.
If you want to get a better look under the hood and learn more about the upload process, you can check out the {@link framework/guides/deep-dive/upload-adapter deep dive guide} covering that topic.
The software that makes the image upload possible is called an upload adapter. And there are two main strategies of getting the image upload work you can adopt in your project:
CKEditor 5 introduces a totally new way of handling images, with strong focus on the end–user experience. It is called {@link features/easy-image Easy Image} and its goal is to make the image upload as effortless and intuitive as possible.
Easy Image is part of the CKEditor Cloud Services offer. It is a SaaS product which:
All that, with virtually zero server setup.
{@link features/easy-image Learn how to use Easy Image in your project}.
The {@link features/ckfinder CKFinder feature} provides a bridge between the editor and CKFinder, a browser-based file manager and a server-side connectors (PHP and .NET).
There are two ways you can integrate CKEditor 5 with the CKFinder file manager:
With both the server and client-side file manager (recommended): Images dropped and pasted directly into the editor are uploaded to the server (just like in the first option).
But there are more cool features available, for instance:
{@link features/ckfinder Learn how to integrate CKEditor 5 with CKFinder in your project}.
CKEditor 5 provides an open API that allows you to develop your own upload adapters. Tailored to your project, a custom adapter will allow you to take the full control over the process of sending the files to the server as well as passing the response from the server (e.g. the URL to the saved file) back to the editor.
{@link framework/guides/deep-dive/upload-adapter Learn how to develop your own upload adapter for CKEditor 5}.