Using CKEditor 5 in ReactJS (include upload image and many cool functionality)

Hi there, in this article I will guide you guys how to use CKEditor v5 in React project (you can also use this in MERN STACK project). Not only include many cool features in our editor, but I’m also help you guys to make the upload image feature work without any configuration in server-side. So let jump into it.

ReactJS and CKEditor 5

1. Create React project
   First of all, we’re going to create our React application by using Vite or you can use create-react-app if you want to. In case you don’t know how to setup React project by using Vite, all you need to do is going to their documentation and follow the instruction, it quite straightforward.

React Application

2. Download CKEditor
The second thing you need to do is download our editor and place it into our project. Go to CKEditor online builder page, choose what type of editor we want to use, in this case we going to pick classic editor as our editor. Pick any plugins that you prefer but in order to make our editor more luxury, I recommend you choose all :))). But note that, if you want to have a change of uploading image to editor from our device, remember to choose a plugin named Base64 upload adapter. But you will note that the add button did not available for us to choose, so to solve this we have to remove CKBox plugin from our editor. One you finish set up process, just click next and download editor to our computer. And that all for this second step. Let move into the most important step that we’re waiting for.

3. Using CKEditor in React Application

Inside our React project, create a folder name ckeditor5 next to src folder like this

Folder structure

Now, extract the .zip folder that we have downloaded before and move all the content inside the ckeditor5 folder. Now our folder structure will be look like this

Folder Structure

Great we’re almost there, now according to the documentation, we have to install ckeditor component for React. So let do this by type this line of code in the terminal

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classis

And also execute this

npm add file:./ckeditor5

4. Initialize CKEditor component

Create a folder name Components inside our src folder and create a file name TextEditor.jsx inside it. Import our ckeditor component in this file

5. Import TextEditor component to file App.jsx and use it

One more step to complete our mission, go to the file App.jsx and import our TextEditor component we have created before

Now open the terminal type

npm run dev

Or if you’re using create-react-app

npm start

And here is our final result

Conclusion

Thanks for reading my article ❤, if you have any problem just comment below and I will help you.

If the post was useful to you, leave me a clap 👏 and follow me, it helps me a lot. Thank you ❤️

Checkout my GitHub & portfolio website for more amazing content.