DEV Community

Cover image for How to add Ckeditor5 in your Next JS, react App
Apu Chakraborty
Apu Chakraborty

Posted on • Edited on

How to add Ckeditor5 in your Next JS, react App

I am creating a fresh CRA & here is my project directory

Alt Text

Before we going started, you need to add this npm package first, to install please paste the below code into your terminal.

npm i @ckeditor/ckeditor5-react
npm i @ckeditor/ckeditor5-build-classic
Enter fullscreen mode Exit fullscreen mode

create a components folder under src folder and create a Editor component under components/Editor.js & use this code

import React, { useEffect, useRef } from "react";

function Editor({ onChange, editorLoaded, name, value }) {
  const editorRef = useRef();
  const { CKEditor, ClassicEditor } = editorRef.current || {};

  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
    };
  }, []);

  return (
    <div>
      {editorLoaded ? (
        <CKEditor
          type=""
          name={name}
          editor={ClassicEditor}
          data={value}
          onChange={(event, editor) => {
            const data = editor.getData();
            // console.log({ event, editor, data })
            onChange(data);
          }}
        />
      ) : (
        <div>Editor loading</div>
      )}
    </div>
  );
}

export default Editor;



Enter fullscreen mode Exit fullscreen mode

Now go to your app.js or wherever you want to use this editor just import Editor Component and use this

import React, { useState, useEffect } from "react";
import "./styles.css";
import Editor from "./Editor";

export default function App() {
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [data, setData] = useState("");

  useEffect(() => {
    setEditorLoaded(true);
  }, []);

  return (
    <div className="App">
      <h1>ckEditor 5</h1>

      <Editor
        name="description"
        onChange={(data) => {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      />

      {JSON.stringify(data)}
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

visit ckEditor5 documentation to add more features - https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

you can clone repo

GitHub logo apuchakraborty / ckEditor5-implement

Created with CodeSandbox

ckEditor5-implement

Created with CodeSandbox

go to - cd /projectdir

npm install & npm start to run






You can use this code in codesSandbox
Here is your editor -

Top comments (17)

Collapse
 
laurencefass profile image
laurence fass

Your codesandbox has same problem as my application. When you make a change in the code, and reload error:

CKEditorError
ckeditor-duplicated-modules
Read more: ckeditor.com/docs/ckeditor5/latest...
▶ 13 stack frames were collapsed.
eval
/src/Editor.js:10:21
7 | useEffect(() => {
8 | editorRef.current = {
9 | CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+

10 | ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
| ^
11 | };
12 | }, []);
13 |

Any idea how to solve this?

Collapse
 
apuchakraborty profile image
Apu Chakraborty
Collapse
 
laurencefass profile image
laurence fass

thanks for reply. can you provide explanation with link?

Collapse
 
codexmakercompany profile image
Samuel Vazquez

Thanks for this !

Collapse
 
terkwood profile image
Felix Terkhorn

Quite welcome! Best of luck in your journeys and have a great weekend!

Collapse
 
commentme profile image
Unnati Bamania

Thanks! This really helps.

Collapse
 
narottam81 profile image
Narottam81

how can we add "Normal" in heading of toolbar along with paragraph? Can you make a post on that, it will help alot.

Collapse
 
trinhcamminh profile image
MINHCT

sir how can I upload image

Collapse
 
rahulnikam profile image
Rahul Nikam

Did you find any solution?

Collapse
 
trinhcamminh profile image
MINHCT

not yet sir:(((

Thread Thread
 
rahulnikam profile image
Rahul Nikam

Bro, I'm trying to find a Rich Text Editor for one of my projects, Non of them are working as expected, but you can go with TipTap

Thread Thread
 
trinhcamminh profile image
MINHCT

can I upload image with this bro ?

Thread Thread
 
rahulnikam profile image
Rahul Nikam

Yes, but only from the URL and not from your device! :(

Thread Thread
 
trinhcamminh profile image
MINHCT • Edited

finally I did it bro. try to use ckeditor by using online builder method. When you choose your plugins remember to choose base64 adapter this can help you to upload image from your computer. I have tried and success. Good luck to you bro. Note that base64 is the way you can upload image without any server-side configuration and no additional pluggin need to be installed when you use online-builder

Thread Thread
 
rahulnikam profile image
Rahul Nikam

Are you using this with Reactjs or Nextjs or any other tech? if you are using it with react or next can you plz send me a GitHub link for some reference?

Thread Thread
 
trinhcamminh profile image
MINHCT

Yes of course bro you can access my blog here for more detail. Also I'm using it with ReactJS. If you have any problem just comment in my blog and I will help you and like if this post is useful <3
dev.to/trinhcamminh/using-ckeditor...

Collapse
 
felixasante profile image
felix asante

Really helpful, i finally got to fix the errors that i was having