自定义在线构建的CKEditor 5在React项目中未显示全部插件工具

以下是针对问题的排查和解决步骤：

• 检查自定义构建的核心配置
  打开自定义构建文件夹中的src/ckeditor.js文件，确认：

  1. 所有需要的插件（如FindAndReplace、Autoformat、CodeBlock、CKBox）都已导入并添加到Plugins数组中，示例：

     import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
     import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
     import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
     import { CKBox } from '@ckeditor/ckeditor5-ckbox';
     
     Editor.builtinPlugins = [
       // ...其他基础插件
       FindAndReplace,
       Autoformat,
       CodeBlock,
       CKBox
     ];
     

  2. defaultConfig中的toolbar数组包含了对应插件的按钮名称，比如'findAndReplace'、'autoformat'、'codeBlock'、'ckbox'。

• 重新构建自定义编辑器
  在自定义构建文件夹中执行以下命令，确保构建产物正确生成：

  npm install
  npm run build
  

  完成后，将build/目录下的文件替换到项目中对应的位置。

• 修正Next.js中的导入方式
  由于Next.js的SSR特性，需要用动态导入避免服务端渲染报错，同时确保导入路径指向正确的构建产物：

  import dynamic from 'next/dynamic';
  const CustomCKEditor = dynamic(() => import('../path/to/your/ckeditor5-custom/build/ckeditor'), { ssr: false });
  

• 显式配置工具栏按钮
  在使用编辑器组件时，显式传入config.toolbar配置，确保所需按钮被包含：

  <CustomCKEditor
    data="<p>测试内容</p>"
    config={{
      toolbar: [
        'heading', '|',
        'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote',
        'findAndReplace', 'autoformat', 'codeBlock', 'ckbox',
        'undo', 'redo'
      ],
      // CKBox需额外配置令牌地址
      ckbox: {
        tokenUrl: '你的CKBox令牌地址'
      }
    }}
  />
  

• 校验版本兼容性
  确保项目中@ckeditor/ckeditor5-react的版本与自定义构建的CKEditor 5版本（36.0.0）匹配，比如安装对应版本：

  npm install @ckeditor/ckeditor5-react@^3.0.0
  

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