How to use CKeditor on your Nextjs or React app

ckeditor.com/ckeditor-5

for the first install package CKeditor use this command;

npm i @ckeditor/ckeditor5-react
npm i @ckeditor/ckeditor5-build-classic
or 
yarn add -D @ckeditor/ckeditor5-react
yarn add -D @ckeditor/ckeditor5-build-classic

Create a components directory under “src” directory and create File with name CKeditor.js inside components, components/CKeditor.js

Paste this code

import React, { useEffect, useRef } from "react";
export default function CKeditor({ onChange, editorLoaded, name, value }) {
    const editorRef = useRef();
    const { CKEditor, ClassicEditor } = editorRef.current || {};
useEffect(() => {
    editorRef.current = {
         CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, 
         ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
        };
    }, []);
    return (
        <>
            {editorLoaded ? (
                <CKEditor
                    type=""
                    name={name}
                    editor={ClassicEditor}
                    data={value}
                    onChange={(event, editor) => {
                        const data = editor.getData();
                        onChange(data);
                    }}
                />
            ) : (
                <div>Editor loading</div>
            )}
        </>
    )
}

typescript version

import React, { useEffect, useRef } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

interface CKeditorProps {
  onChange: (data: string) => void;
  editorLoaded: boolean;
  name: string;
  value: string;
}

export default function CKeditor({
  onChange,
  editorLoaded,
  name,
  value,
}: CKeditorProps) {
  const editorRef = useRef<{ CKEditor: typeof CKEditor; ClassicEditor: typeof ClassicEditor }>();
  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
  }, []);

  return (
    <>
      {editorLoaded ? (
        <CKEditor
          editor={ClassicEditor}
          data={value}
          onChange={(event: any, editor: any) => {
            const data = editor.getData();
            onChange(data);
          }}
          config={{
            toolbar: [
              "heading",
              "|",
              "bold",
              "italic",
              "link",
              "bulletedList",
              "numberedList",
              "blockQuote",
            ],
          }}
        />
      ) : (
        <div>Editor loading</div>
      )}
    </>
  );
}

now you can use CKeditor on your page for this we gonna use the index.js file

import { useEffect, useState } from "react";
import CKeditor from "../components/CKeditor";
export default function index() {
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [data, setData] = useState("");
useEffect(() => {
    setEditorLoaded(true);
  }, []);
  return (
    <div>
      <CKeditor
        name="description"
        onChange={(data) => {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      />
       {JSON.stringify(data)}
    </div>
  );
}

typescript version

import { useEffect, useState } from "react";
import CKeditor from "../components/CKeditor";

export default function Index() {
  const [editorLoaded, setEditorLoaded] = useState<boolean>(false);
  const [data, setData] = useState<string>("");

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

  return (
    <div>
      <CKeditor
        name="description"
        onChange={(data: string) => {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      />
      {JSON.stringify(data)}
    </div>
  );
}

here’s the final result.

Thats it 😁