Використання панелі інструментів wysihtml5 з кнопками Twitter Bootstrap - javascript, css, twitter-bootstrap, wysiwyg, wysihtml5

Я намагаюся використовувати кнопки завантаження щебетати на панелі інструментів wysihtml5. Моя проста проблема - CSS на кнопках перемикається протилежно до панелі інструментів exec() команди. Тож я натискаю жирну кнопку, і кнопка отримує клас активного стану, але текст не стає напівжирним, поки друга кнопка не натисне, в якій точці кнопка втрачає свій активний стан. Отже, CSS і JS перебувають у фазі.

Думки?

Ось HTML, який є насправді всім, що потрібно з боку JS, якщо в нього входять файли wyishtml5.js і bootstrap.js (перемикає .btn"отримати .active Клас CSS).

Також, ось 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 до будь-якої активної кнопки.

Тому для стилювання цих кнопок все, що вам потрібно, щоб додати файл 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>

Ви можете розглянути можливість використання wysihtml5-bootstrap. Він уже інтегрує wysihtml5 з bootsrap, включаючи додавання btn клас до кнопок.