将 CKEditor 5 与 Next.js 集成

Next.js 是一个 React 元框架，有助于创建全栈 Web 应用程序。它提供不同的渲染策略，如服务器端渲染 (SSR)、客户端渲染 (CSR) 或静态站点生成 (SSG)。此外，它还提供基于文件的路由、自动代码拆分以及其他开箱即用的便捷功能。

Next.js 13 引入了新的 App Router 作为之前 Pages Router 的替代方案。App Router 支持服务器组件，并且比面向客户端的 Pages Router 更以服务器为中心。

CKEditor 5 尚未支持服务器端渲染，但您可以将其与 Next.js 框架集成。在本指南中，您将使用两种路由范式将编辑器添加到 Next.js 项目。为此，您需要 Next.js CLI 以及官方的 CKEditor 5 React 组件。

# 设置项目

本指南假设您已经拥有一个 Next 项目。要创建这样的项目，您可以使用 CLI，例如 create-next-app。请参考 Next.js 文档 了解更多信息。

# 从 npm 安装

首先，安装 CKEditor 5 包

• ckeditor5 – 包含开源插件和功能的包。
• ckeditor5-premium-features – 包含高级插件和功能的包。

根据您的配置和所选插件，您可能需要安装第一个包或两个包。

npm install ckeditor5 ckeditor5-premium-features

Next.js 基于 React，因此还需要安装 用于 React 的 CKEditor 5 WYSIWYG 编辑器组件

npm install @ckeditor/ckeditor5-react

接下来，您将在 React 组件中使用安装的依赖项。在 components 目录中创建一个新的组件，例如 components/custom-editor.js。在组件文件中，导入所有必要的依赖项。然后，创建一个返回 CKEditor 5 React 组件的功能组件。以下示例展示了如何在组件中使用开源和高级插件。

App Router 默认情况下使用服务器组件。这意味着您需要明确地将组件标记为客户端。您可以通过在文件顶部，在导入内容上方使用 'use client' 指令来实现。如果您使用 Pages Router，则不需要该指令。

// components/custom-editor.js
'use client' // only in App Router

import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo } from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

function CustomEditor() {
    return (
        <CKEditor
            editor={ ClassicEditor }
            config={ {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                },
                plugins: [
                    Bold, Essentials, Italic, Mention, Paragraph, SlashCommand, Undo
                ],
                licenseKey: '<YOUR_LICENSE_KEY>',
                mention: { 
                    // Mention configuration
                },
                initialData: '<p>Hello from CKEditor 5 in React!</p>'
            } }
        />
    );
}

export default CustomEditor;

CustomEditor 组件已准备好用于页面中。页面的目录将根据所选路由策略而有所不同。

CKEditor 5 是一个客户端文本编辑器，它依赖于浏览器 API，因此您需要为我们的自定义组件禁用服务器端渲染。您可以使用 Next.js 中内置的 dynamic() 函数延迟加载组件。

// app/page.js (App Router)
// pages/index.js (Pages Router)

import dynamic from 'next/dynamic';

const CustomEditor = dynamic( () => import( '@/components/custom-editor' ), { ssr: false } );

function Home() {
  return (
    <CustomEditor />
  );
}

export default Home;

现在您可以运行项目。如果您选择了 create-next-app，请键入 npm run dev 以在浏览器中查看您的应用程序。

此外，请注意导入路径 – 本指南使用 默认导入别名 (@)。如果您没有配置它，请适当地更改路径。

# 如何？

# 在协作插件中使用编辑器

我们提供多个 现成的集成，这些集成在 Next.js 应用程序中提供协作编辑功能

• 具有实时协作功能和修订历史记录功能的 CKEditor 5
• 具有离线评论、跟踪更改和修订历史记录功能的 CKEditor 5

在上述示例之上构建应用程序并不是必需的，但它们应该可以帮助您入门。