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

Question

亲爱的来自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 之后？

Answer 1

感谢@dandavis 的回答。

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

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

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

Answer 2

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

听起来内联模式会ui更好地满足您的用例。

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

TinyMCE content with default application CSS

html

javascript

css

tinymce

tinymce-4