在React.js中如何完整还原CKEditor5编辑器内的显示效果（含内嵌内容）

核心原因是CKEditor5的输出HTML仅包含结构，编辑器内的显示效果依赖专属的内容样式，仅用dangerouslySetInnerHTML渲染结构没有引入对应样式、没有套对作用容器就会出现格式错乱。按照以下步骤操作即可实现效果完全对齐：

• 引入CKEditor5内容样式
  如果你使用官方预设的编辑器构建版本（如ClassicEditor、BalloonEditor），直接在渲染展示内容的页面引入对应内容样式：

  // 以ClassicEditor为例，其他构建版本替换对应的包名即可
  import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';
  // 如果是自定义构建的编辑器，引入构建产物里的ckeditor5-content.css
  

• 给渲染容器添加专属作用类名
  CKEditor5的内容样式默认仅作用于带有.ck-content类名的容器，渲染时需要把输出内容放在该类名的容器内：

  function BlogContent({ editorOutput }) {
    return (
      <div 
        className="ck-content"
        dangerouslySetInnerHTML={{ __html: editorOutput }}
      />
    )
  }
  

• 排查全局样式冲突
  如果引入样式后仍有部分格式错乱，检查项目全局样式是否覆盖了.ck-content下的元素样式，可将CKEditor内容样式的引入顺序调整到全局样式之后，或者给.ck-content下的冲突元素添加更高优先级的重置样式。
• 同步自定义样式
  如果你在编辑器配置中添加了自定义块样式、自定义插件的专属样式，需要把这部分样式同步到渲染页面的.ck-content作用域下，确保两边样式规则完全一致。

对于表格、代码高亮、媒体嵌入这类特殊插件的输出内容，需要确认对应插件的样式也被正确引入，没有被按需打包规则剔除。

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