How To Use React Ckeditor Upload File Image With Demo and Example Codes
This is a simple tutorial on how you can configure React Ckeditor wysiwyg library to handle file upload when users try to insert a picture into our editor, so the editor will upload the file to the server rather than providing the base64 string the default case by CKeditor.
At first I feel like it may look very easy, and it should be because image upload is a standard feature in the editor so it doesn't need to be that complicated, but it turns out it’s far more complex than I thought. I read somewhere online that some people took days to solve just this problem.
Firstable assume you have a backend API that will handle file upload into your server with this criteria.
Request
curl --location --request POST 'https://YOUR_API/upload_files' \
--form 'files=@"/D:/Pictures/my-image.jpg"'
Response
{
"filename": "1622085846852.jpg"
}
Then on the react side, create a custom Ckeditor component that we can reuse that component anywhere on the project whenever you need an editor feature.
Just need a little tweak to change the API URL, UPLOAD_ENDPOINT based on your API request and response requirement.
You can visit this demo page here for better visualization and try to modify the code yourself.
CKeditor is my prefered Javascript library for doing WYSIWYG (What You See Is What You Get). You can build an advanced text editor on the web using very easy to customize tools that can customize the tool needed.
Even if you are not familiar with the library, you don’t need that much deep exploration into this library, basically just adding the ckeditor to your npm packages and then copy and paste some starting examples from the official documentation.
