javascript - Using wysihtml5 toolbar with Twitter Bootstrap buttons - Stack Overflow

admin管理员组

文章数量:1418380

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() mands. 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-mand="bold" title="Bold" class="btn" ><span class="icon-darkGray txt18" ><b>B</b></span></a> 
  <a data-wysihtml5-mand="italic" title="Italics" class="btn" ><span class="icon-darkGray txt18" style="font-style:italic">I</span></a>
  <a data-wysihtml5-mand="underline" title="Underline" class="btn" ><span class="icon-darkGray txt18" style="text-decoration:underline">U</span></a>
</span>

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() mands. 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-mand="bold" title="Bold" class="btn" ><span class="icon-darkGray txt18" ><b>B</b></span></a> 
  <a data-wysihtml5-mand="italic" title="Italics" class="btn" ><span class="icon-darkGray txt18" style="font-style:italic">I</span></a>
  <a data-wysihtml5-mand="underline" title="Underline" class="btn" ><span class="icon-darkGray txt18" style="text-decoration:underline">U</span></a>
</span>

• javascript
• css
• twitter-bootstrap
• wysiwyg
• wysihtml5

Share Improve this question Follow asked Dec 3, 2012 at 22:41 tim petersontim peterson 24.4k6363 gold badges186186 silver badges303303 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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-mand-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-mand-dialog-opened,
.wysihtml5-mand-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-mand="bold" title="Bold" class="btn" ><span class="icon-darkGray txt18" ><b>B</b></span></a> 
  <a data-wysihtml5-mand="italic" title="Italics" class="btn" ><span class="icon-darkGray txt18" style="font-style:italic">I</span></a>
  <a data-wysihtml5-mand="underline" title="Underline" class="btn" ><span class="icon-darkGray txt18" style="text-decoration:underline">U</span></a>
</span>

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

本文标签： javascriptUsing wysihtml5 toolbar with Twitter Bootstrap buttonsStack Overflow