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

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.

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.

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.

Using CKEditor in React Application

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

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

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

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

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.

Top comments (5)

Fazlay Rabbi • Jan 4

for Nexjs 13.4
below works for me
`// components/custom-editor.js
import React, { useEffect, useRef, useState } from "react";

const editorConfiguration = {
toolbar: {
items: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"|",
"outdent",
"indent",
"|",
"imageUpload",
"blockQuote",
"insertTable",
"mediaEmbed",
"undo",
"redo",
],
},
language: "en",
};

function TextEditor() {
const editorRef = useRef();
const [editorLoaded, setEditorLoaded] = useState(false);
const { CKEditor, ClassicEditor } = editorRef.current || {};

useEffect(() => {
editorRef.current = {
CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, //Added .CKEditor
ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
};
setEditorLoaded(true);
}, []);
const [data, setData] = useState("");
return (
<>
{editorLoaded ? (
editor={ClassicEditor}
config={editorConfiguration}
data={"

Hello from CKEditor 5!

"}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
/>
) : (
<>Loading...</>
)}
</>
);
}

export default TextEditor;
`
source :stackoverflow.com/questions/666813...