使用CKEditor4搭建的博客网站，插入代码时，编辑的内容与前端显示的内容不一样
如图所示：

后台编辑：

前端显示：

1. 使用 ck-content 类名包裹内容

CKEditor 在展示内容时会使用特定的样式，这些样式通常通过类名 .ck-content 应用。为了确保前端页面中的内容样式与编辑器内一致，可以将需要展示的内容包裹在一个带有 ck-content 类的容器中。例如：

    <div class="ck-content">   <!-- 这里是通过 CKEditor 编辑后的内容 -->   <article>     <h1>文章标题</h1>     <p>这是文章的正文内容。</p>   </article> </div>

这种做法能够确保前端展示的内容继承了 CKEditor 的默认样式，包括字体、段落间距、标题样式等3。

2. 引入 CKEditor 的样式文件

除了使用类名 .ck-content 外，还可以通过手动引入 CKEditor 的样式文件来进一步确保样式一致性。CKEditor 提供了专门的 CSS 文件用于前端展示内容，通常命名为 ckeditor5.css 或 content.css。可以通过以下方式引入：

    <link rel="stylesheet" href="path/to/ckeditor5.css"> 

确保路径 path/to/ckeditor5.css 指向正确的 CKEditor 样式文件位置。引入该文件后，所有被包裹在 .ck-content 类中的内容都会应用 CKEditor 的样式规则，从而保证展示效果的一致性3。

3. 配置 CKEditor 以保留 HTML5 标签

如果使用了 HTML5 标签（如 <article>、<section> 等），需要确保 CKEditor 不会清除这些标签的样式。为此，可以安装并配置 GeneralHtmlSupport 插件，该插件允许 CKEditor 支持更多 HTML5 标签和属性。配置方法如下：

    import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';  ClassicEditor   .create(document.querySelector('#editor'), {     plugins: [GeneralHtmlSupport, /* 其他插件 */],   })   .then(editor => {     // 编辑器初始化成功后的操作   })   .catch(error => {     // 错误处理   });  

通过引入 GeneralHtmlSupport 插件，可以确保 CKEditor 在编辑过程中保留 HTML5 标签及其样式，从而避免样式丢失的问题2。

4. 确保样式文件在页面中正确加载

为了确保样式文件正确加载，可以在浏览器的开发者工具中检查网络请求和样式应用情况。确认 ckeditor5.css 文件是否被成功加载，并且 .ck-content 类是否正确应用到了需要展示内容的容器上。如果样式仍然未生效，可以尝试在 CSS 文件中添加自定义样式覆盖，以确保与 CKEditor 的默认样式一致。

5. 使用前端框架时的注意事项

如果使用的是前端框架（如 Vue 或 React），在动态渲染内容时，确保 .ck-content 类正确应用到渲染的 DOM 元素上。例如，在 Vue 中可以使用 v-html 指令来插入 HTML 内容，并确保容器具有正确的类名：

    <div class="ck-content" v-html="editorContent"></div>       

在 React 中可以使用 dangerouslySetInnerHTML 属性来实现类似效果：

    <div className="ck-content" dangerouslySetInnerHTML={{ __html: editorContent }} />    

6. 避免样式冲突

在引入 CKEditor 的样式文件时，需要注意避免与其他全局样式文件发生冲突。可以通过将 .ck-content 类的样式隔离到特定的作用域中，或者使用 CSS-in-JS 方案来避免样式污染。