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

Question

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

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

我假设iframe可以工作,但是,我需要WYSIWYG编辑器的内容(然后是iframe中的内容),以及'non-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.

这是一个重置css的例子.(您还需要确定范围,以确保不重置所有CSS).

编辑:使用LESS

为了使这更容易,你可以使用LESS,这是bootstrap使用的.

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

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

看看LESS网站,看看是否吃了巢.这就是你所追求的.该站点还将向您展示如何编译它.