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

Question

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

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

Answer 1

您的问题归结为此常见问题解答条目：

\n

\n

不存在“contents.css”文件这样的东西，因为在 CKEditor 5 中，功能会带来自己的内容样式，这些样式默认包含在 JavaScript 构建中，并由 style\xe2\x80\x93loader 加载（它们可以\n提取） ， 也）。它优化了构建的大小，\n因为未使用的功能的样式被简单地排除了。

\n

虽然功能提供了一些样式，但\n开发人员需要确保 CKEditor 5 创建的内容的样式正确，无论是在前面\xe2\x80\x93end还是在后面\xe2\x80\x93end 。要设置编辑器中\n内容的样式 (back\xe2\x80\x93end)，请使用 .ck-content CSS 类

\n

\n

目前编辑器提供的内容样式很少。这就是为什么网站维护人员需要在前/后\xe2\x80\x93end 中设置编辑内容的样式。

\n

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

\n

#content-container-in-frontend a,\n#backend-container .ck-content a {\n   ...\n}\n

\n\n

PS 在有关内容样式的问题上，请毫不犹豫地发表您的意见。我们很想了解更多关于您的使用\xe2\x80\x93case（您的环境是什么？您使用Webpack吗？您如何管理项目中的样式？），您期望什么以及什么最适合你。

\n\n

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

\n