CKEditor5 With Custom Image Uploader in React

Alvin Rapada
Aug 20, 2020 · 2 min read

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 reaction when my code worked 😂

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 .

A function where we initialize creating the upload adapter, take note of the , that class is where we process the image and send it to the API.

Declaring the API URL, 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 block, the api Im using returns an object named . You can also do here to your API response, very helpful for debugging.

Take note that is a promise so you need to get the promise value, that is why I did the append and trigger the API inside .

Possible problem encountered:

If for some reason you encounter this error ^ when building the app, you can check out the full story on my website: CKEditor5 With Custom Image Uploader in React

source: https://bit.ly/2Q5M08j

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store