Integrating CKEditor 5 with Next.js 13.4 (Page Router): A Step-by-Step Guide

#webdev #javascript #nextjs #frontend

Next.js is a popular React framework for building web applications, and CKEditor 5 is a powerful rich text editor that can be seamlessly integrated into React applications. In this guide, we will walk through the process of integrating CKEditor 5, a powerful WYSIWYG editor, with Next.js 13.4 ( Page Router) a popular React framework for building web applications. By following these steps, you will be able to seamlessly incorporate CKEditor 5 into your Next.js project, allowing users to create and edit rich content. it will also work for ckeditor react

Step 0: Set Up a Next.js Project

npx create-next-app my-next-ckeditor-app
cd my-next-ckeditor-app

Step 1: Installation

To Install React with next js the best way to install with online builder.
CKEditor Online Builder go to the website and choose your editor and required plugin. The download the file and extract it in your root folder Here is a more extensive guide from documentation. Rename the file ckeditor5 and install it as a node module with below command

yarn add file:./ckeditor5 # or npm install file:./ckeditor5

Step 2: Configuration

Now make a Component File for making a reusable editor component which you can use any place in your app

// components/TextEditor.tsx
import React, { useEffect, useRef, useState } from "react";
import editorConfiguration from @configs/editorConfigs.ts
const TextEditor: React.FC<any> = ({ newBlogData, setNewBlogData }) => {
  const editorRef = useRef<any>();
  const [editorLoaded, setEditorLoaded] = useState(false);
  const { CKEditor, ClassicEditor } = editorRef.current || {};
  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, //Added .CKEditor
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
    setEditorLoaded(true);
  }, []);

  const handleUpdateBlogData = (data: string) => {
    setNewBlogData({ ...newBlogData, content: data });
  };

  return (
    <>
      {editorLoaded ? (
        <CKEditor
          editor={ClassicEditor}
          config={editorConfiguration}
          data={newBlogData?.content}
          onBlur={(event: any, editor: any) => {
            const data = editor.getData();
            console.log({ event, editor, data });
            handleUpdateBlogData(data);
          }}
        />
      ) : (
        <>Loading...</>
      )}
    </>
  );
};

export default TextEditor;

Step 3: Use Component In app

Now the moment of truth. We are going to use it in our Blog Editor

import React, { ReactNode, useState } from "react";
import DashBoardLayout from "@/layout/DahsboardLayout";
import TextEditor from "@/components/TextEditor/TextEditor";

const AddNewBlog = () => {
        const [newBlogData, setNewBlogData] = useState<any>({});
        const handleSubmit =()=>{console.log(newBlogData)}

  return (
    <div className="pb-8">
        <TextEditor setNewBlogData={setNewBlogData} newBlogData={newBlogData} />
         <button  onClick={() => handleSubmit()}>
                Submit
              </button>
    </div>
  );
};

AddNewBlog.getLayout = (page: ReactNode) => {
  return <DashBoardLayout topBarTitle={"Add Blog"}>{page}</DashBoardLayout>;
};

export default AddNewBlog;

Step 4: Customization and Advanced Features

CKEditor 5 offers a wide range of customization options and advanced features. You can customize the toolbar, add plugins, and configure various editor settings to fit your specific requirements. To add any new tool bar option you have to select it in the beginning while we are making online build. After that you are not able to install any new plugin. But you can add plugin what you have created. We sill discuss about how to make a ckeditor 5 plugins in another post.

That's it! By following these steps, you have successfully integrated CKEditor 5 with Next.js. Now you can enhance your Next.js applications with a powerful and customizable WYSIWYG editor.

Happy coding!