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

Question

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

我知道我可以把内容写成CSS，这样最好吗？

Answer 1

你的问题归结为 FAQ entry:

There is no such thing as the contents.css file because in CKEditor 5 features bring their own content styles, which are by default included in the JavaScript build and loaded by the style–loader (they can be extracted, too). It optimizes the size of the builds as the styles of unused features are simply excluded.

Although some styles are provided by the features, it is up to the developers to make sure the content created by CKEditor 5 is properly styled, both in the front–end and in the back–end. To style the content in the editor (back–end), use the .ck-content CSS class

目前小编提供的内容样式很少。这就是为什么要由网站维护人员来设计 front/back–end 中编辑内容的样式。

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

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

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

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

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

Apply styles to HTML output of CKEditor 5

ckeditor

ckeditor5