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!
Top comments (4)
@fazlay Would you like to contribute this to the CKEditor DevTo?
I would be more than happy to share my insights and contribute to the community
@fazlay Email me at mrina.sugosh@cksource.com
@fazlay Just wanted to follow up, are you still interested in contributing this to the CKBlog?