CKEditor内联编辑器转气球编辑器失败：页面空白报错求助

一、Balloon编辑器加载报错（Cannot read properties of undefined (reading 'create')）的解决方案 #

1. 匹配依赖版本兼容性 #

CKEditor React组件与编辑器构建包版本必须兼容，版本不匹配是此类报错的核心原因：

• 执行命令查看当前安装版本：

  npm list @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-balloon
  

• 安装稳定兼容的版本组合（示例版本经测试无兼容问题）：

  npm install --save @ckeditor/ckeditor5-build-balloon@37.1.0 @ckeditor/ckeditor5-react@5.0.2
  

2. 确认导入与组件使用正确 #

替换Inline编辑器代码为Balloon编辑器的标准用法：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';

const handleBodyChange = (e, editor) => {
    setBody(editor.getData());
    setShowBodyButtons(true);
    setShowTitleSaved(false);
    setShowBodySaved(false);
};

<CKEditor
    editor={BalloonEditor}
    data={singleRequest?.body || 'Click to add text'}
    onChange={handleBodyChange}
/>

注意：Balloon编辑器默认仅在选中文本时显示工具栏，初始化时无工具栏是正常设计，并非加载失败。

3. 调整Webpack配置 #

CKEditor构建包已预编译完成，需避免不必要的转译，在Webpack配置文件中添加以下规则：

module.exports = {
    module: {
        rules: [
            // 处理CKEditor图标与样式文件
            {
                test: /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/,
                use: ['raw-loader']
            },
            {
                test: /ckeditor5-[^/]+\/theme\/.+\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 排除CKEditor源码转译
            {
                test: /node_modules\/(ckeditor5-[^/]+|@ckeditor\/ckeditor5-.+)\/src\/.+\.js$/,
                use: 'babel-loader'
            }
        ]
    }
};

安装所需依赖loader：

npm install --save-dev style-loader css-loader raw-loader babel-loader

4. 清理缓存并重新构建 #

# 清理npm缓存
npm cache clean --force
# 删除依赖目录与锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

重启开发服务器后重新构建项目。

二、Inline编辑器滚动工具栏移出可视区域的修复方案 #

若无需切换编辑器，可通过以下两种方式修复工具栏滚动问题：

1. 使用CKEditor内置Sticky配置 #

<CKEditor
    editor={InlineEditor}
    data={singleRequest?.body || 'Click to add text'}
    onChange={handleBodyChange}
    config={{
        toolbar: {
            items: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
            // 开启工具栏固定定位
            sticky: true,
            shouldNotGroupWhenFull: true
        }
    }}
/>

2. 自定义CSS固定工具栏 #

.ck-editor__top .ck-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #ffffff;
}

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