2

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

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

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

4

2 回答 2

8

您可能能够解决此问题的一种方法是将您的 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。

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

您将需要创建一个文件“HTMLEditable.less”。然后添加与上面类似的代码。他们将上述内容编译成 css 并将 css 中的所有内容限定为#HTMLEditable

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

于 2013-08-28T10:39:36.287 回答
4

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

#HTMLEditable{  
    paste in all of your css
}

比复制所有这些粘贴到这里： http: //less2css.org/在较少的区域，它会为你生成正确的 css。

于 2014-02-11T15:29:31.853 回答