CKEditor5 With Custom Image Uploader in React
Spent almost 2 days figuring out a proper way to use CKEditor5 image uploader. I’ve tried ckFinder, SimpleUploader, etc. but none of them worked maybe because none of the documentations made any sense to me 😂. Luckily I found a StackOverflow conversation and somehow got what I needed working with just some minor tweaks.
My Goal
Every time a user copy and paste, drag and drop, or upload an image into my text editor, It will trigger an API that saves the image into an S3 bucket and returns the image S3 URL, then embeds that image back to the text editor.
Installation:
Install CKEditor5 to react here.
Actual Code:
Here’s the full code, no more talking. Enjoy! but not too much 😊
Important code blocks:
You can skip this part if you already find what you’re looking for in the code above.
Declaring our custom uploader, just add your function name inside extraPlugins .
A function where we initialize creating the upload adapter, take note of the return new MyUploadAdapter , that class is where we process the image and send it to the API.
Declaring the API URL, ${ENV} is the link depending on the environment(dev, staging, or prod). don’t mind that, could be any link to your API.
Make sure to add headers if your API is authenticated/secured.
Make sure to pass the right object to the resolve({}) block, the api Im using returns an object named s3Url . You can also do console.log(response) here to your API response, very helpful for debugging.
Take note that this.loader.file is a promise so you need to get the promise value, that is why I did the append and trigger the API inside .then() .
A possible problem encountered:
If for some reason you encounter this error ^ when building the app, you need to change the way you define CKEditor, instead of just importing it up the top of the JS file, try this solution:
source: https://bit.ly/2Q5M08j
If you find this helpful, I’d appreciate a coffee 😊
