javascript-使用wysihtml5工具栏和Twitter Bootstrap按钮

我试图将twitter引导按钮与wysihtml5工具栏一起使用.我的简单问题是按钮上的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>

解决方法:

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

因此,要设置这些按钮的样式,只需添加以下CSS,即可添加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>

标签：twitter-bootstrap,wysiwyg,wysihtml5,css,javascript
来源： https://codeday.me/bug/20191031/1976685.html