CKEditor 5 and Image Button

Question

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.

Based on the guides and articles I have been reading, my assumption is that I have to save the image to the server and then give the url back to the ckeditor so that it may use it to display the image.

What I can't seem to figure out is how to do that. Where in the ckeditor js code would I add my own logic so that it may pick up the uploaded image, send it to the server and then give a url back to ck editor?

I've been through a lot of documentation such as this, but I can't seem to find anything.

https://docs.ckeditor.com/ckeditor5/latest/features/image.html
https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html

Answer 1

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.

Did you check the console? On the console, if you don't have the editor properly configured, you'd have something like this:

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

Now, there are two built-in upload adapters – for CKFinder's server connector and for the Easy Image service provided by CKEditor Cloud Services. Both need to be configured to work:

• CKFinder adapter: https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
• Easy Image: https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image

The role of an upload adapter is to expose a function which will send a file to the server (in whatever way it wants) and notify the editor once the upload is done (by returning a URL to this file). The editor takes care of the rest – inserting the image into the content, displaying a progress bar, etc.

Besides using the built-in adapters, you can write your own one. See:

• https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
• https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src as an example of a simple upload adapter