3

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

想法？

.btn这是 HTML，如果其中包含 wyishtml5.js 和 bootstrap.js 文件（切换's get .activeCSS 类），这实际上是 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>
4

2 回答 2

4

我回答了我自己的问题。与其尝试在这些按钮上使用 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>
于 2012-12-04T00:06:53.837 回答
0

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

于 2013-01-13T12:17:23.843 回答