React中@ckeditor/ckeditor5-build-decoupled-document渲染异常求助

问题描述 #

在React项目中使用@ckeditor/ckeditor5-build-decoupled-document构建版本加载CKEditor时，编辑器仅显示背景，无法正常渲染工具栏和文档内容，期望实现官方文档编辑器的完整样式（包含工具栏与可编辑内容区域）。

原代码 #

CKEditorDocument.js #

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

export default function CKEditorDocument() {
  return (
    <div className="App">
      <h2>Using CKEditor 5 build in React</h2>
      <CKEditor
        editor={DecoupledEditor}
      />
    </div>
  );
}

package.json依赖片段 #

"@ckeditor/ckeditor5-build-decoupled-document": "^35.4.0",
"@ckeditor/ckeditor5-react": "^5.0.6",

问题原因 #

DecoupledDocument构建版本的核心特性是工具栏与编辑区域分离，默认不会自动挂载工具栏组件，仅初始化编辑区域的基础容器，因此出现仅显示背景的情况。

解决方法 #

修改CKEditorDocument.js，通过onInit回调手动完成工具栏的挂载：

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

export default function CKEditorDocument() {
  return (
    <div className="App">
      <h2>在React中使用CKEditor 5文档编辑器</h2>
      {/* 预留工具栏挂载容器 */}
      <div id="toolbar-container"></div>
      <CKEditor
        editor={DecoupledEditor}
        onInit={(editor) => {
          // 将工具栏插入到编辑区域前方
          const editableElement = editor.ui.getEditableElement();
          editableElement.parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editableElement
          );
        }}
        // 可选：设置编辑器默认内容
        data="<p>这是编辑器的默认内容</p>"
      />
    </div>
  );
}

额外说明 #

• 若需自定义工具栏位置，只需调整insertBefore的目标容器即可，比如将工具栏挂载到页面顶部的独立容器中。
• 确保依赖版本匹配，避免因版本差异导致的兼容性问题。

内容的提问来源于stack exchange，提问作者Biến Lễ Văn Hải