带有默认应用程序 CSS 的 TinyMCE 内容答案

【问题标题】：TinyMCE content with default application CSS带有默认应用程序 CSS 的 TinyMCE 内容
【发布时间】：2019-08-21 16:34:18
【问题描述】：

来自 SO 的各位朋友；

我找不到合适的解决方案来为 TinyMCE 编辑器的内容提供与主 css 文件相同的样式。不要混淆，我没有尝试更改 TinyMCE 的 UI 组件的主题或样式，但在其上/用它键入的信息。

此时 TinyMCE 解决了我的所有需求，但我仍然希望内容看起来与发布后的外观相同。

我尝试添加：“content_css : “custom.css”，但它似乎没有按预期工作......

  <script language="javascript" type="text/javascript">
    tinyMCE.init({
      selector: "#issue",
      theme : "modern",
      mode : "textareas",
      plugins : "hr, code, wordcount, image, imagetools, table, paste, template",
      /*menubar: "insert,edit",*/
      /*toolbar: "image,paste, hr",*/
      paste_data_images: true,
      content_css : "visual/css/base.css",
      templates: [
        {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
        {title: 'Some title 2', description: 'Some desc 2', url: 'visual/mce/models/devel.html'}
      ]
    });
  </script>

有没有办法让内容遵循主应用程序使用的 CSS？

【问题讨论】：

检查网络选项卡以确保外部 css 正确加载；路径是相对的，与 css 相对路径不同。
嗨@dandavis，是的，我检查的第一件事......没关系。 TinyMCE 似乎忽略了父 div id 或类。最合理的选择似乎是为其制作自定义 css。我试图将它的样式设置为“div#issue > h1”，这是它在主 css 中的定义方式，但似乎它需要它自己的规则直接选择 H1 而不是#issue h1。
是的，您在该表中的规则必须相当“简单”。编辑器实际上在一个 iframe 中运行，该 iframe 基本上没有围绕内容的其他包装器 html。您可能能够注入包装器 div，或者可能是一个基本的 html 文档而不是空白，我不确定这是否是一个选项。对于我们的安装，我做了一些正则表达式，将使用中的 css 剥离成对 tinymce 友好的东西，如果我们网站的 css 发生变化，我可以机械地重新剥离。
这似乎是正确的答案，是的。 “编辑器实际上是在一个 iframe 中运行的，它基本上没有围绕内容的其他包装器 html。”似乎 Js 合并的更改和元素的数量，使 CSS 路径丢失。
您可以对网站 css 进行迷你导出。您可能不需要每条小规则。这里最重要的是字体大小、标题间距和列表缩进。获得完美匹配可能不值得付出努力和维护。

标签： javascript html css tinymce tinymce-4

【解决方案1】：

尝试将inline: true 添加到您的配置中。这将删除所有 iframe 包装并直接在页面中编辑指定的目标元素。我们的默认（iframe）模式有助于将编辑器中的内容与周围页面隔离开来；例如在 CMS 上，编辑在单独的管理界面中完成，并且您不希望将 admin-ui 样式应用于内容。

听起来内联模式更适合您的用例。

【讨论】：

感谢@spyder，这对我来说是最有效的解决方案。

【解决方案2】：

感谢@dandavis 的回答。

编辑器似乎围绕内容创建了多个元素（包括 iframe），因此，主应用程序使用的 CSS 选择器似乎无法正确应用。

我这里的方法是将 TinyMCE 中使用的主要元素克隆到一个新的 css 文件中，专门用于编辑器，并将样式与 content_css 参数合并，例如：

 /*create a custom tailored css for TinyMCE content here*/
 content_css : "visual/css/base.css",

【讨论】：