Using CKEditor 5 in ReactJS (include upload image and many cool functionalities)
Published: 2023-01-03 15:36:57

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](https://vitejs.dev/), all you need to do is going to their documentation and follow the instruction, it quite straightforward.

![Image React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5mqoavj2y9ymktsro7w.png)


## 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](https://ckeditor.com/ckeditor-5/online-builder/), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7nus1mzs0x1co7g4mv6.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmro4iq9xf15852zqxnb.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv02327ar18m9lbvx635.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i09gmcw39f5brnwb85q9.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfn1uwuuqhdvsp3g4es2.png)


## 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](https://github.com/trinhcamminh) & [portfolio website](https://minhct.netlify.app/) for more amazing content.


![Image MINHCT logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yohsbo06dnwul0xn6r5w.png)