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

亲爱的朋友们

我无法找到一个合适的解决方案来为TinyMCE编辑器的内容提供与主css文件相同的样式。请不要混淆，我并不是在尝试更改TinyMCE的UI组件的主题或样式，而是在其上键入的信息

在这一点上，TinyMCE解决了我的所有需求，但我仍然希望内容的外观与发布后的外观相同

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

tinyMCE.init({
选择器：“#问题”，
主题：“现代”，
模式：“文本区域”，
插件：“hr、代码、字数、图像、图像工具、表格、粘贴、模板”，
/*菜单栏：“插入，编辑”*/
/*工具栏：“图像、粘贴、hr”*/
粘贴数据图像：真，
content_css:“visual/css/base.css”，
模板：[
{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'}
]
});

感谢@dandavis的回答。

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

我的方法是在一个新的css文件中克隆TinyMCE内部使用的主要元素，专门用于编辑器，并将样式与

content\u css

参数合并，例如：

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

---

尝试将

inline:true

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

---

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

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