CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapwysiwygwysihtml5
tim peterson
tim peterson

Reputation: 24315

Using wysihtml5 toolbar with Twitter Bootstrap buttons

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>

Upvotes: 3

Views: 5512

Answers (2)

D&#243;nal
D&#243;nal

Reputation: 187399

You might want to consider using wysihtml5-bootstrap. It already integrates wysihtml5 with bootsrap, including adding a btn class to the buttons.

Upvotes: 0

tim peterson
tim peterson

Reputation: 24315

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>

Upvotes: 4

Related Questions