将样式应用于 CKEditor 5 的 HTML 输出

Posted 2023-02-16

【中文标题】将样式应用于 CKEditor 5 的 HTML 输出

【英文标题】：Apply styles to HTML output of CKEditor 5

【发布时间】：2019-02-23 08:38:55

【问题描述】：

我正在使用 CKEditor 5 来帮助我的客户发布他们的文章。但编辑器生成的内容是纯 html 片段。如何样式化内容？页面<div/>中的样式是否可能与ckeditor5中的样式相同？

我知道我可以为内容编写 CSS，是最好的方法吗？

【参考方案1】：

您的问题归结为FAQ entry：

没有 contents.css 文件这样的东西，因为在 CKEditor 5 功能带来自己的内容样式，默认情况下包含 在 javascript 构建中并由 style-loader 加载（它们可以是 也提取了）。它优化构建的大小作为样式 未使用的功能被简单地排除在外。

虽然某些样式是由功能提供的，但这取决于 开发人员确保 CKEditor 5 创建的内容正确 风格，无论是在前端和后端。样式化 编辑器中的内容（后端），使用 .ck-content CSS 类

目前编辑器提供的内容样式很少。这就是为什么要由网站维护人员在前端/后端设置已编辑内容的样式。

例如，要确保<a> 元素的样式正确，您可能需要这样的东西：

#content-container-in-frontend a,
#backend-container .ck-content a 
   ...

---

附：不要犹豫，在the issue about content styles 发表您的意见。我们很想更多地了解您的用例（您的环境是什么？您使用 Webpack？您如何管理项目中的样式？），您期望什么以及最适合您的。

---

更新：您现在可以浏览编辑器使用的内容样式并在应用程序的前端使用它们。 Learn more.

【讨论】：

在我的用例中，我只是从 CDN 加载经典编辑器，并且想要在不加载 CK 时包含样式，无论如何要这样做？