Question

我正在尝试使用wysihtml5工具栏中的twitter引导按钮。我的简单问题是按钮上的CSS切换与工具栏exec()命令相反。所以我单击粗体按钮，按钮获得活动状态类，但文本不会加粗，直到第二个按钮单击，此时按钮失去活动状态。所以CSS和JS是不同步的。

思想？

如果一个包含wyishtml5.js和bootstrap.js文件（切换.btn的get .active CSS类），这就是JS方面实际需要的所有HTML。

另外，这里的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文件即可：

.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与bootstrap集成在一起，包括在按钮中添加btn类。

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

2 个答案: