Question

我创建了一个用户界面（用于wordpress插件），用户可以选择在div中添加文字，图片和视频（我们称之为div，container）

我一直在研究它。我最近添加了tinyMCE（WYSIWYG编辑器）以在container中添加文字。

现在，我意识到我犯了一个大错误。文本用户写入被为wp管理面板定义的css规则覆盖。

例如，

用户输入<h1>Hello</h1>（在tinyMCE的帮助下），然后我从tinyMCE中获取该内容并将其附加到container中。

但问题出现了，wordpress的admin css可以有这样的css规则，

h1 {
 color : #d6d6d6;
 line-height: 40px;
 font-size: 30px;
}

因此，它在tinyMCE和我的container中看起来有所不同。（因为tinyMCE的代码在iframe内，并且不受wordpress的css规则的影响，但我的container没有）

我想要一些东西，以便container内的任何元素都不受WordPress的管理员css的影响。

我知道一个好的解决方案是将container放在iframe内。但是我编写了很多代码而没有想到iframe，我需要3-4天来调整iframe的所有内容。可能存在一些跨浏览器问题。

我可以重置一些wordpress规则，但有时会失败，因为用户可能会输入任何内容。我需要一些全面的东西。

Answer 1

如果您要撤消特定规则（例如您提到的h1规则），您可以使用css通过更具体的方式覆盖它。

.container h1 {
    color:#000000;
    line-height: 24px;
    font-size: 24px;
}

这将使用给定的值覆盖您提到的css规则，但仅当元素位于容器类内时（我猜测您要使用的默认值。）

不幸的是，您必须为wordpress的admin css更改的所有内容添加撤消规则。

Answer 2

在CSS文档中使用！important。通过这种方式，您的CSS不会被覆盖，因为它优先于所有内容，包括内联样式。

h1 {
    color:#ff0 !important;
}

Answer 3

另一种可能的解决方案是编辑tinyMCE在其框架中返回的页面，以添加到wordpress的CSS文件中。这意味着最终用户在输入信息时会看到相同的格式。

您是否拥有对tinyMCE创建的iframe内容的代码级访问权限？