How to add Ckeditor5 in your Next JS, react App

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

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

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;

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>
  );
}

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

you can clone repo

apuchakraborty / ckEditor5-implement

Created with CodeSandbox

ckEditor5-implement

Created with CodeSandbox

go to - cd /projectdir

npm install & npm start to run

View on GitHub

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

Comments

[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?

[Apu Chakraborty]

codesandbox.io/s/bitter-morning-m2...

[laurence fass]

thanks for reply. can you provide explanation with link?

[Samuel Vazquez]

Thanks for this !

[Felix Terkhorn]

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

[Unnati Bamania]

Thanks! This really helps.

[Narottam81]

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

[MINHCT]

sir how can I upload image

[Rahul Nikam]

Did you find any solution?

[MINHCT]

not yet sir:(((

[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

[MINHCT]

can I upload image with this bro ?

[Rahul Nikam]

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

[MINHCT]

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

[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?

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

[felix asante]

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