React项目中CKEditor5报toolbarview-item-unavailable错误及图片上传问题

核心问题分析 #

直接替换node_modules内的CKEditor文件无效，npm/yarn的依赖缓存会覆盖手动修改；同时错误的导入方式（混用构建包和源码包）会导致依赖缺失，引发编辑器空白。

分步解决方案 #

1. 清理原有依赖环境 #

• 卸载现有CKEditor相关包：

  npm uninstall @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-editor-classic
  # 或使用yarn：
  yarn remove @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-editor-classic
  

• 删除node_modules文件夹和package-lock.json/yarn.lock，重新执行npm install或yarn install，确保依赖环境干净。

2. 正确使用自定义构建包 #

在线构建器导出的压缩包，不要手动复制到node_modules，采用以下两种方式之一：

• 本地依赖安装：将解压后的构建文件夹放到项目目录（比如./ckeditor-build），执行命令：

  npm install ./ckeditor-build
  

  这样npm会将自定义包注册到依赖中，避免手动替换的问题。
• 静态资源引入：将构建文件夹放到public/ckeditor，通过script标签在index.html中引入：

  <script src="%PUBLIC_URL%/ckeditor/ckeditor.js"></script>
  

  之后在React组件中直接使用全局的ClassicEditor变量。

3. 规范导入与初始化 #

• 若采用本地依赖安装，导入方式和官方构建包一致：

  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  

• 禁止使用@ckeditor/ckeditor5-editor-classic/src/classiceditor这种源码导入方式——源码包需要手动配置所有插件、样式及依赖，极易引发缺失问题导致编辑器空白。

4. 配置图片上传功能 #

• 确保在线构建器中已添加ImageUpload、ImageToolbar、SimpleUploadAdapter（或其他上传适配器插件），并在toolbar配置中勾选了imageUpload按钮。
• 在React组件中初始化时配置上传接口：

  import { useEffect } from 'react';
  
  function EditorComponent() {
    useEffect(() => {
      ClassicEditor.create(document.querySelector('#editor'), {
        simpleUpload: {
          uploadUrl: '/api/upload-image' // 替换为你的后端上传接口
        },
        toolbar: [
          'imageUpload', 'bold', 'italic', 'link', // 按需配置工具栏按钮
          'bulletedList', 'numberedList', 'blockQuote'
        ]
      }).catch(err => console.error(err));
    }, []);
  
    return <div id="editor"></div>;
  }
  
  export default EditorComponent;
  

5. 解决toolbarview-item-unavailable错误 #

该错误表示工具栏配置了未加载的按钮，需检查：

• 在线构建器中是否已添加对应功能的插件（如图片上传需ImageUpload）；
• 工具栏配置的按钮名称与插件提供的完全一致（可在构建器的工具栏预览面板中确认正确名称）。

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