Using wysihtml5 toolbar with Twitter Bootstrap buttons

Question

I'm trying to use twitter bootstrap buttons with the wysihtml5 toolbar. My simple problem is the CSS on the buttons toggles opposite to the toolbar exec() commands. So I click the bold button and the button gets the active state class but the text doesn't get bolded until the 2nd button click at which point the button loses its active state. So the CSS and JS are out of phase.

Thoughts?

Here's the HTML which is actually all that is required on the JS side of things if one includes the wyishtml5.js and bootstrap.js files (toggles the .btn's get .active CSS class).

Also, here's the jsfiddle which doesn't quite yet demonstrate the problem but I'm working on it right now..

<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

I answered my own question. Instead of trying to use twitter bootstrap JS on these buttons it is better to use the wysihtml5 JS behavior which adds the class wysihtml5-command-active to any active button.

So to style these buttons all you need to add your reset.css file is the following 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;
}

So you don't need the twitter bootstrap.js data attribute: data-toggle="buttons-checkbox" and your final HTML looks like this:

<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>