ckeditor - 将样式应用于 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

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

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

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

<小时/>

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

<小时/>

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