DEV Community

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

Posted on • Updated on

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.

Image React Application

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

Image 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

Image 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

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

Image Create Editor Component

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

Image Import Editor Component

Now open the terminal type
npm run dev

Or if you’re using create-react-app
npm start

And here is our final result

Image CKEditor 5 with ReactJS

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.

Image MINHCT logo

Top comments (5)

Collapse
 
fazlay profile image
Fazlay Rabbi

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...

Collapse
 
rahulnikam profile image
Rahul Nikam

Great post...nice explanation

Collapse
 
trinhcamminh profile image
MINHCT

Thanks bro ❤️

Collapse
 
mrinasugosh profile image
Mrinalini Sugosh (Mrina)

@trinhcamminh Would you like to contribute this blog to our official CKEditor DevTo dev.to/ckeditor?

Collapse
 
jakkanda profile image
Svitlana Herashchenko • Edited

Made all by your guide but billions ways of import Ckeditor5 including yours didn't help
terrible lib((((