css - 仅为一个 div 及其内容启用 (CSS) 样式表

Question

我正在寻找与 Bootstrap 3 兼容的(简单的)WYSIWYG 编辑器 jQuery 插件。我见过很多与以前的 Bootstrap 兼容的 WYSIWYG 编辑器 jQuery 插件，但我的网站使用Bootstrap 3，所以每次我实现这样的 jQuery 插件时，我的 Bootstrap 3 都会破坏按钮并弄乱整个编辑器。

所以现在我想问是否有一个选项可以只为一个 div 及其内容启用 Bootstrap 2 样式表。

我假设 iframe 可以工作，但是，我需要所见即所得编辑器的内容(然后在 iframe 中)，以及“非 iframe”上的文本输入。

Answer 1

您可能能够解决此问题的一种方法是为该 div 确定您的 css 范围。这是我用我创建的内容管理系统实现的。

例如，假设您为 WYSIWYG Div 指定了 HTMLEditable 的 ID。

您可以将您的 css 和该 div 中的所有 css 定位到该 div。

#HTMLEditable .WYSIWYG{
   ....css goes here
}

#HTMLEditable p{
   ....css goes here
}

上面的 css 只适用于那个 div。那么这只是在该 div 中找到您需要的正确 css 的一个例子。

请注意，您可能需要覆盖/重置该 div 的 css 以停止对其应用 bootstrap3。

Here是重置 css 的示例。 (您还需要限定此范围，以确保您不会重置所有 css)。

编辑:少用

为了使这更容易，您可以使用 Bootstrap 使用的 LESS。

     #HTMLEditable {
      //import the modal css
       @import "bootstrap.css";
    }

您需要创建一个文件“HTMLEditable.less”。然后添加类似于上面的代码。The less will they compile the above into css and will scope everything in the css to #HTMLEditable

查看 LESS站点并查看嵌套。这就是你所追求的。该站点还将向您展示如何编译它。