How to implement Ckeditor 5 with Next js

Ck editor is a rich content editor which is used for editing or blog setup.
while implementing sometimes this may give window not defined error or hydration error.

How to use CKEditor in react js

The following two packages will be required to work

npm i @ckeditor/ckeditor5-build-classic

npm i @ckeditor/ckeditor5-react

After installing make a component for CKEditor

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
const Contenteditor = ({ setcontent, content }) => {

  return (
    <>
      <CKEditor
        editor={ClassicEditor}
        data={content}
        onChange={(event, editor) => {
          const data = editor.getData();
          setcontent(data);
        }}
        config={{
           placeholder: "Add Your Post here...",
        }}
      />
    </>
  );
};

export default Contenteditor;

Now we will use this component wherever we have a requirement for CKEditor in our application

import dynamic from "next/dynamic";
const Contenteditor = dynamic(() => import("@/components/ui/ckeditor"), {
  ssr: false,
});

const demo = () => {
  return (
    <>
      <Contenteditor 
      // setcontent={setcontent} //additional props to setcontent
      // content={content}
        />
    </>
  );
};

export default demo;

Now you can use CKEditor in your application 😊

How to add an image upload plugin in CKEditor in react js

CKEditor provides a plugin for image upload. There are two ways in which you can add upload image functionality in CKEditor

• Ckfinder
• Simple adapter with API hosted on your server

The simplest and best way will be second, in which we can use our own API to upload images on our server. create a function to upload images with your API

  function uploadAdapter(loader) {
    return {
      upload: () => {
        return new Promise((resolve, reject) => {
          const body = new FormData();
          loader.file.then((file) => {
            body.append("file", file);
            fetch(`/api/upload`, {
              method: "post",
              body: body,
            })
              .then((res) => res.json())
              .then((res) => {
                console.log(res);
                resolve({
                  default: res.file.url,
                });
              })
              .catch((err) => {
                reject(err);
              });
          });
        });
      },
    };
  }

add upload plugin in CKEditor, so the final code will be

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
const Contenteditor = ({ setcontent, content }) => {
  function uploadAdapter(loader) {
    return {
      upload: () => {
        return new Promise((resolve, reject) => {
          const body = new FormData();
          loader.file.then((file) => {
            body.append("file", file);
            fetch(`/api/upload`, {
              method: "post",
              body: body,
            })
              .then((res) => res.json())
              .then((res) => {
                console.log(res);
                resolve({
                  default: res.file.url,
                });
              })
              .catch((err) => {
                reject(err);
              });
          });
        });
      },
    };
  }
  function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return uploadAdapter(loader);
    };
  }
  return (
    <>
      <CKEditor
        editor={ClassicEditor}
        data={content}
        onChange={(event, editor) => {
          const data = editor.getData();
          setcontent(data);
        }}
        config={{
          extraPlugins: [uploadPlugin],
          placeholder: "Add Your Post here...",
        }}
      />
    </>
  );
};

export default Contenteditor;