React + Vite项目中CKEditor 5加载完成但无UI显示问题排查

问题定位与修复 #

1. 未加载CKEditor核心样式 #

CKEditor 5的UI完全依赖自带样式文件，缺失后会出现编辑器初始化成功但无界面的情况。
在/src/Components/Form/Fields/HtmlRte.jsx中添加样式导入：

// 新增这行样式导入
import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';

2. Vite编译配置适配 #

Vite对CKEditor这类使用动态导入的库需要额外优化配置，否则可能导致资源加载异常。
修改vite.config.js，添加优化规则：

export default defineConfig({
  // ...原有配置
  optimizeDeps: {
    include: ['@ckeditor/ckeditor5-build-classic']
  }
})

3. 容器元素样式缺失 #

编辑器容器如果没有默认高度，会导致UI被压缩不可见。
在全局样式或组件样式中添加：

.ck-editor__editable {
  min-height: 300px;
}

4. 组件销毁时清理编辑器实例 #

路由切换时如果未销毁旧编辑器实例，可能导致新实例无法正常渲染。在HtmlRte.jsx的useEffect中添加销毁逻辑：

useEffect(() => {
  let editorInstance = null;

  const initEditor = async () => {
    if (!editorRef.current) return;
    editorInstance = await ClassicEditor.create(editorRef.current, editorConfiguration);
    console.log('Editor is ready to use!');
  };

  initEditor();

  // 组件卸载时销毁编辑器
  return () => {
    if (editorInstance) {
      editorInstance.destroy();
    }
  };
}, [editorConfiguration]);

验证流程 #

1. 保存所有修改后，重新执行npm install && npm run dev
2. 切换到Post HTML页面，检查编辑器UI是否正常显示
3. 查看控制台确认无报错信息

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