TinyMCE：使用链接标签手动加载样式表答案

【问题标题】：TinyMCE: manually loading stylesheets by using link-tagTinyMCE：使用链接标签手动加载样式表
【发布时间】：2011-08-15 19:20:54
【问题描述】：

我开始在现有项目中使用 TinyMCE。不幸的是，该项目使用了一个样式表，它为选择器#content td 声明了 CSS 规则，这是设计师的错误决定。这些规则正在打破 TinyMCE 主题。但是，这些规则在项目中经常应用。因此，更换它们会很费力。

#content td 规则具有更高的优先级，因为它们是在 TinyMCE 从 javascript 加载它的 CSS 规则之前加载的。如果我能够使用<link> 标签加载 TinyMCE CSS，我可以通过在项目样式表之前加载 TinyMCE 样式表来解决问题。

【问题讨论】：

【解决方案1】：

使用链接标签与 javascript 加载 tinyMCE 的样式并不能解决问题，因为问题在于 CSS 特异性。

CSS 的规则规定，具有最高特异性的最后一个有效规则将优先。

TinyMCE 的表格规则是.mceitemtable td 的形式，其特异性为0,1,1。您的 #content td 规则以 ID 开头，其特异性为 1,0,1。

因此，无论加载顺序如何，ID 规则都将永远胜过 tinyMCE 的基于类的规则。

（旁白：我不认为 TinyMCE 还是通过 javascript 加载了它的 CSS？tinyMCE 的默认行为是在 iframe 中加载编辑器，检查所述 iframe 显示该框架通过 <link> 标签加载了它自己的 CSS。 )

【讨论】：

感谢您对特异性的详细解释，我还不知道。 TinyMCE 不会加载到 iframe 中，但这会很棒。有选择吗？我找不到任何关于那个的信息......
Tinymce 创建一个 contenteditable iframe 并隐藏底层元素（div、textarea）。该 iframe 然后用于编辑内容并设置样式。
在我的情况下它没有。我使用 Firebug 查看了 DOM 树，但看不到 iframe。如果 TinyMCE 在 iframe 中，则样式完全没有问题。 iframe 行为是否可配置？

【解决方案2】：

您可以加载自己的样式表以覆盖默认的 tinymce css。看看tinymce设置content_css.

【讨论】：