Integrating CKEditor 5 with Next.js 13.4 (Page Router): A Step-by-Step Guide
Tags: webdev, javascript, nextjs, frontend
Published: 2024-01-29 06:28:49

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**
```bash
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](https://ckeditor.com/ckeditor-5/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](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start-other.html).  Rename the file ckeditor5 and install it as a  node module with below command

```powershell
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

```jsx
// 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 

```jsx
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!