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

Question

亲爱的SO朋友们;

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

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

我尝试添加："content_css："自定义.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

尝试将inline: true添加到您的配置中。这将删除所有 iframe 换行，并直接在页面中编辑指定的目标元素。我们的默认 (iframe( 模式有助于保护编辑器中的内容与周围页面的联系;例如，在 CMS 上，编辑是在单独的管理界面中完成的，并且您不希望将管理员 UI 样式应用于内容。

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

Answer 2

感谢@dandavis的回答。

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

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

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