Question

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

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

我假设iframe可以工作，但是，我需要WYSIWYG编辑器的内容（然后是iframe中的内容），以及'非iframe'上的文本输入。

Answer 1

你可以解决这个问题的一种方法是将你的css范围扩大到那个div。这是我用我创建的内容管理系统实现的。

例如，假设你给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。）

编辑：使用LESS

为了使这更容易，你可以使用LESS，这是bootstrap使用的。

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

你需要制作一个'HTMLEditable.less'文件。然后添加类似于上面的代码。他们将上述内容编译成css并将css中的所有内容都限定为#HTMLEditable

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

Answer 2

您需要在所有css规则之前放置此div的类或ID。如果你需要一个css文件而不是更少，你就可以这样做。

#HTMLEditable{  
    paste in all of your css
}

将所有这些粘贴复制到此处：http://less2css.org/在较小的区域中，它将为您生成正确的CSS。

仅为一个div及其内容启用（CSS）样式表

2 个答案: