渲染由 TinyMCE 编辑的 HTML答案

【问题标题】：Rendering HTML edited by TinyMCE渲染由 TinyMCE 编辑的 HTML
【发布时间】：2015-06-17 08:25:40
【问题描述】：

我在网页中使用tinymce editor。当用户在编辑后单击 save 按钮时，我会从编辑器中获取内容并将它们设置为 html (fiddle) 的 div。

问题是保存后显示的内容与在编辑器中显示的内容不同。

图片顶部（编辑视图）和图片底部（用户编辑后的视图）的内容应该相同。

原因是这两个部分使用了不同的 css。有人知道解决这个问题的方法吗？

【问题讨论】：

【解决方案1】：

当你调用 TinyMCE 时，你可以指定它应该使用的 CSS。

tinymce.init({
  selector:'textarea',
  content_css: '/css/style.css'
});

根据评论进行编辑

在您的 CSS 文件中，您可以为 TinyMCE 设置指定样式，如下所示：

#tinymce ul {
    list-style-type: decimal;
}

【讨论】：

我试过了。 jsfiddle.net/49rzqgwn/1 但是编辑器的某些功能会受到影响。在这种情况下，项目符号无法正常工作，因为“ul”的“list-style-type”在站点 css 中是 none。

【解决方案2】：

您需要更改 tinymce 主题文件夹中的 content.css 文件以匹配您前端站点上显示的内容。

【讨论】：

我试过了。 jsfiddle.net/49rzqgwn/1 但是编辑器的某些功能会受到影响。在这种情况下，项目符号无法正常工作，因为“ul”的“list-style-type”在站点 css 中是 none。
那么实际的问题是编辑器中的样式和您网站上的样式不同，还是项目符号显示在编辑器中而不是您的网站上？
您在该小提琴中包含的 CSS 链接将列表样式类型设置为无，这是您在前端站点上使用的样式表吗？
我想让编辑器和网站相似，而不破坏编辑器的任何功能。是的。它将列表样式类型设置为无。我在我的网站中使用这个样式表。该样式表属于google的materializecss框架。materializecss.com@DarkHippo