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 方案来避免样式污染。
