使用带有 Twitter Bootstrap 按钮的 wysihtml5 工具栏

Question

我正在尝试使用带有 wysihtml5 工具栏的 twitter 引导按钮。我的简单问题是按钮上的 CSS 切换到工具栏 exec() 命令的对面。因此，我单击粗体按钮，按钮获取活动状态类，但文本不会变为粗体，直到第二个按钮单击按钮失去其活动状态。所以 CSS 和 JS 是反相的。

想法？

如果其中包含 wyishtml5.js 和 bootstrap.js 文件（切换 .btn 的获取 .active CSS 类），这实际上是 JS 方面所需的全部内容。

另外，这里是 jsfiddle，它还没有完全证明问题，但我现在正在解决它..

<span class="btn-group" data-toggle="buttons-checkbox" >
  <a data-wysihtml5-command="bold" title="Bold" class="btn" ><span class="icon-darkGray txt18" ><b>B</b></span></a> 
  <a data-wysihtml5-command="italic" title="Italics" class="btn" ><span class="icon-darkGray txt18" style="font-style:italic">I</span></a>
  <a data-wysihtml5-command="underline" title="Underline" class="btn" ><span class="icon-darkGray txt18" style="text-decoration:underline">U</span></a>
</span>

Answer 1

我回答了我自己的问题。与其尝试在这些按钮上使用 twitter bootstrap JS，不如使用 wysihtml5 JS 行为，它将类 wysihtml5-command-active 添加到任何活动按钮。

因此，要设置这些按钮的样式，您只需添加 reset.css 文件就是以下 CSS：

.wysihtml5-action-active, .wysihtml5-command-dialog-opened,
.wysihtml5-command-active {
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.2);
  background: #eee !important;
}

因此您不需要 twitter bootstrap.js 数据属性：data-toggle="buttons-checkbox"，您的最终 HTML 如下所示：

<span class="btn-group" >
  <a data-wysihtml5-command="bold" title="Bold" class="btn" ><span class="icon-darkGray txt18" ><b>B</b></span></a> 
  <a data-wysihtml5-command="italic" title="Italics" class="btn" ><span class="icon-darkGray txt18" style="font-style:italic">I</span></a>
  <a data-wysihtml5-command="underline" title="Underline" class="btn" ><span class="icon-darkGray txt18" style="text-decoration:underline">U</span></a>
</span>

Answer 2

您可能需要考虑使用wysihtml5-bootstrap。它已经将 wysihtml5 与 bootsrap 集成，包括向按钮添加 btn 类。