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)
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...
Great post...nice explanation
Thanks bro ❤️
@trinhcamminh Would you like to contribute this blog to our official CKEditor DevTo dev.to/ckeditor?
Made all by your guide but billions ways of import Ckeditor5 including yours didn't help
terrible lib((((