Image upload overview
Inserting images into content created with CKEditor 5 is a very common task. In a properly configured rich-text editor, there are several ways for the end user to insert images:
- Pasting an image from the clipboard.
- Dragging a file from the file system.
- Selecting an image through a file system dialog.
- Selecting an image from a media management tool in your application.
- Pasting and URL to an image, either into the editor dialog or directly into the content.
With the exception of pasting URLs, all other solutions require the image to be uploaded to a server. The server will then be responsible for providing the image URL used by CKEditor 5 to display the image in the document.
The software that makes the image upload possible is called an upload adapter. It is a callback that tells the WYSIWYG editor how to send the file to the server. There are two main strategies of getting the image upload to work that you can adopt in your project:
- Official upload adapters – There are several features providing upload adapters developed and maintained by the CKEditor team. Pick the best one for your integration and let it handle the image upload in your project.
- Custom upload adapters – Create your own upload adapter from scratch using the open API architecture of CKEditor 5.
Read our comprehensive blog post about Managing images with CKEditor 5 to find out more details about image upload and management and to compare the available options.
If you want to get a better look under the hood and learn more about the upload process, you can check out the “Custom image upload adapter” deep dive guide covering that topic.
CKEditor 5 offers multiple ways to include images in your rich content. You can choose whichever you find more comfortable and efficient for your needs. Use classic interface, or boost productivity with the advanced image handling offered.
Paste or drop an image directly into the editor. You can also use the "Insert image" button in the toolbar.
# Official upload adapters
# Easy Image
CKEditor 5 introduces a new way of handling images, with a strong focus on the end–user experience. This feature is called Easy Image and its goal is to make the image upload as effortless and intuitive as possible.
Easy Image is part of the commercial CKEditor Cloud Services offer. It is a SaaS product that:
- securely uploads images,
- takes care of rescaling and optimizing them as well as providing various image sizes (responsive images),
- delivers uploaded images through a blazing-fast CDN.
All that with virtually zero server setup.
There are two ways you can integrate CKEditor 5 with the CKFinder file manager:
With the server-side connector only – In this scenario, images dropped or pasted into the editor are uploaded to the CKFinder server-side connector running on your server.
With both the server-side connector and the client-side file manager (recommended) – Images dropped and pasted into the editor are uploaded to the server (like in the first option).
But there are more cool features available, for instance:
- uploading using the full user interface,
- browsing previously uploaded images,
- editing images (cropping, resizing, etc.),
- organizing or deleting images.
# Simple adapter
# Base64 adapter
Please remember that while
Base64 upload is a very easy solution, it is also highly inefficient. The image file itself is kept as data in the database, generating a much heavier data load and higher transfer. We recommend using alternative ways to upload images into CKEditor 5.
# Implementing your own upload adapter
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 WYSIWYG editor.
# Inserting images via URL
CKEditor 5 supports inserting images into the document via pasting URLs. These may be pasted both into the image insertion dialog or, thanks to the
AutoImage function, directly into content.