React中为CKEditor 5添加自定义插件失败求助

针对你遇到的情况，以下是具体的排查和解决步骤：

1. 避免修改预构建版本的builtinPlugins #

如果你是直接使用@ckeditor/ckeditor5-react搭配预构建的@ckeditor/ckeditor5-build-classic，无法通过修改ClassicEditor.builtinPlugins来添加插件——预构建版本的插件集合是固定打包好的，这种方式不会生效。

正确的做法是直接在React组件的编辑器配置中声明插件，而非修改编辑器类的静态属性。

2. 正确的React集成配置示例 #

将所有需要的插件（包括CodeBlock）在组件的config.plugins数组中声明，同时配置工具栏：

import { CKEditor } from '@ckeditor/ckeditor5-react';
// 导入编辑器核心（而非预构建版本）
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
// 导入所需的基础插件
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
// 导入CodeBlock插件
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

function CKEditorComponent() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        plugins: [
          Essentials,
          UploadAdapter,
          Autoformat,
          Bold,
          Italic,
          BlockQuote,
          Heading,
          Image,
          ImageCaption,
          ImageStyle,
          ImageToolbar,
          ImageUpload,
          Link,
          List,
          Paragraph,
          CodeBlock
        ],
        toolbar: [
          'heading',
          '|',
          'bold',
          'italic',
          'link',
          'bulletedList',
          'numberedList',
          'uploadImage',
          'blockQuote',
          'undo',
          'redo',
          'codeblock'
        ]
      }}
      data="<p>编辑内容...</p>"
    />
  );
}

export default CKEditorComponent;

3. 排查其他可能问题 #

• 检查依赖安装：确认@ckeditor/ckeditor5-code-block已正确安装，可查看package.json中的依赖项，或执行npm ls @ckeditor/ckeditor5-code-block验证。
• 清理缓存：执行npm run build后，清理浏览器缓存（快捷键Ctrl+F5），避免加载旧的构建资源。
• 查看控制台错误：打开浏览器开发者工具的Console面板，检查是否有未显示的错误（比如插件依赖缺失）——CodeBlock依赖Essentials、Paragraph等基础插件，确保这些已包含在插件列表中。

内容的提问来源于stack exchange，提问作者daniel sas