Ckeditor5: [Docs] Improve the Image upload guide

[Reinmar]

Right now this guide doesn't mention CKFinder adapter (which is available by default) and does not mention the possibility to write your own adapters.

On SO I explained all that more thoroughly (https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5) so we can extend this guide with such info.

[Reinmar]

We also need a simple guide about implementing your own upload adapters.

[Reinmar]

DUP about writing upload adapter guide: https://github.com/ckeditor/ckeditor5/issues/709

[Reinmar]

DUP about adding section about CKFinder to the image upload guide: https://github.com/ckeditor/ckeditor5/issues/699.

[Reinmar]

We improved a lot of the existing docs and wrote some new ones. What's still missing is a guide describing how to write a custom adapter, but there's been a community activity on this already, so it's less urgent.

[SKGGitHub]

Is there any update on documentation for how to write your own custom image upload adapter?

[Reinmar]

There are two places that I'd recommend checking:

1. https://ckeditor.com/docs/ckeditor5/latest/api/module_upload_filerepository-UploadAdapter.html
2. And the implementation of https://github.com/ckeditor/ckeditor5-adapter-ckfinder

We've seen many developers implementing their own adapters based on these resources.

[SKGGitHub]

THanks for this. Can you share more details like how to integrate it with CKeditor5 code. I am building CKEditor source code in my react application. I have editor as seperate component and using it in my application where I want to place it. Now How to add support for image pasting in this editor? How to make connection that when someone paste image on editor it should react. Right now nothing happens if I am pasting image or on click of image button on toolbar.

[Reinmar]

Support for pasting/dropping images is included in the editor. You need to add and configure upload adapter so CKEditor 5 knows how to upload that dropped file.

I recommend opening a JS console because warnings about missing file adapter are logged there and they link to https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

[SKGGitHub]

When I paste any text in editor it is working fine.
When I try to paste any image on it nothing happens. And no error in JavaScript console as well. Yes I understood that I need to get create Upload adapter but at least it should throw error or something which will make sure that setup is good till now and upload adapter is next step.

Attaching Editor file and its usage in one of component file if that enables you to help me.

ckeditor.txt
Editor.txt

[Reinmar]

You use CKFinder's upload adapter but you haven't configured it. That's why nothing happens. You'd need to set https://ckeditor.com/docs/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html#member-uploadUrl this option if you really want to use it (so far we've been talking about a custom adapter, so I'm a bit lost now).

[SKGGitHub]

I am very confused with Image upload jargon. Can you clarify few things please. Is CKFinder paid plugin or I can use it. If I can use it then what is paid service part in it or it is totally free.

What do you suggest for any corporate if they are using CKEditor5 and want to integrate image upload functionality but dont want to buy any paid service. Can we still use CKFinder. I do not have any knowledge around it and trying to gather the same and implement CKeditor5 in my project. A detailed view on it would be really helpful on it and will help me to conclude on what to do next.

[SKGGitHub]

I understand that I might have made you confused as well..but the code which i shared i got from somewhere on website and just used it without knowing much about it. We are happy to use existing adapter if they are freely available and can integrate them with my backend service which upload files to one of our shared server.

[Reinmar]

CKFinder's server-side connectors are paid. CKFinder's adapter for CKEditor 5 (the plugin that you enabled) is licensed under GPL (as entire CKEditor 5). Whether this means that it's free for you is not for me to answer.

Assuming you can go with GPL and you don't want to pay you can:

• Use the CKFinder upload adapter for CKEditor 5 to send the files to your server, but handle them there via your own backend (not CKFinder connector).
• Write your own upload adapter for CKEditor 5 and use it instead of CKFinder upload adapter so to best synchronise it with what your backend.

I already sent you links to all resources needed to come up with a final solution. I can't assist you further.

[SKGGitHub]

Thanks @Reinmar!

I will start developing based on the info you shared. Obviously that added more clarity and now I understand much better how things are related.

[SKGGitHub]

I have configured the ckfinder url as well but still same response.

1. While pasting image in editor no error in console and nothing happens. Although URL is not correct as of now but I will change it soon. I was just thinking at lest it should break or try to hit that url etc.

2. I assume this URL should be of some Rest API call which will upload the image and return Image URL back. So, Image file will be send in API call parameter automatically?
   ckeditor.txt

[SKGGitHub]

Hi All,

I am able to drag and drop image in editor now but removed with message that unable to upload and that's true as well because URL is not good enough to handle image upload.

Can you please suggest what should be the URL i should mention for CKFinder? Is it REST API call URL which will take some parameter and return back uploaded image URL to editor?

A little insight to it would be helpful please.

[Reinmar]

We rewrote all the docs (kudos to @oleq) and now they should cover all the parts. The starting point is https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html. I also updated https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5 to point to those new places.

There's still some work to be done on polishing the custom image upload adapter guide, but I'll open a separate ticket for that and I can finally close this one :)