1

我创建了一个 UI（用于 wordpress 插件），在该 UI 中，我让用户可以选择在一个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 规则，但有时会失败，因为用户可以输入任何内容。我需要一些完全证明的东西。

4

3 回答 3

1

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

h1 {
    color:#ff0 !important;
}
于 2013-04-02T18:50:18.870 回答
1

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

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

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

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

于 2013-04-02T18:33:42.310 回答
0

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

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

于 2013-04-02T18:45:46.980 回答