CKEditor 显示格式（使用 CKEditor CSS）HTML 来自数据库

Question

这是我的第一个 post 所以我想说很高兴加入这个社区，我会尽我所能帮助别人，但我现在是需要帮助的人。

--问题

我在显示使用 .getData() 从 CKE 检索到的文本的正确样式时遇到问题，这些文本保存到数据库中并显示在文章中。

--什么时候生效？

当我包含这个时 CSS:

<link rel="stylesheet" href="\js\ckeditor\contents.css">

在我的 base.html.twig <head> 标签中，这改变了网站的 css。

--我需要做什么？

我需要做什么来避免冲突？还是有什么方法可以在不使其可编辑的情况下呈现文本？像 CKEDITOR.render(tagId)

--部分图片:

问候

维克托

Answer 1

请看： https://docs.ckeditor.com/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

如果您使用的是经典 CKEditor，那么它的内容将保存在带有单独文档的 iframe 中。为了设置内部文档的样式，CKEditor 将 contents.css 附加到它。由于单独的 CSS 文件中的内部样式不会与 HTML 一起保存或合并到 HTML 中，因此在 contents.css 中使用您希望看到的相同样式很重要在您的目标页面上（将使用保存的内容）。

这不是 CKEditor 错误，而只是您需要在应用程序中应用的一种不同方法。

如果您要为不同的页面创建内容，您可以创建一个大的 contents.css 文件，或者在任何样式冲突的情况下创建多个 CSS 文件，您可以根据某些逻辑动态加载这些文件（它需要编写一些代码来处理）使用 contentsCss 设置。请注意，在动态 CSS 切换的情况下，您不想在 config.js 文件中使用 contentsCss，而是直接在 HTML 页面上的实例配置中使用服务器端标记为 "spit out" CKEditor 实例的正确配置，例如

var editor = CKEDITOR.replace( 'editor1',{
    language : 'en',
    // other configuration settings
    // ...
    contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ]
}

您可以使用服务器端标签，它将 return 整个编辑器配置或仅这部分 contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ] 甚至在呈现 HTML 时更正文件路径。

CKEditor 显示格式（使用 CKEditor CSS）HTML 来自数据库

CKEditor display formatted(with CKEditor CSS) HTML from database

javascript

ckeditor