Utilizzo della barra degli strumenti wysiht5 con i pulsanti di avvio di Twitter - javascript, css, twitter-bootstrap, wysiwyg, wysihtml5

Sto provando a usare i pulsanti twitter bootstrap con la barra degli strumenti wysihtml5. Il mio semplice problema è che il CSS sui pulsanti si alterna di fronte alla barra degli strumenti exec() comandi. Quindi faccio clic sul pulsante in grassetto e il pulsante ottiene la classe di stato attiva ma il testo non viene in grassetto fino a quando il 2 ° pulsante non fa clic sul punto in cui il pulsante perde il suo stato attivo. Quindi CSS e JS sono sfasati.

Pensieri?

Ecco l'HTML che in realtà è tutto ciò che è richiesto dal lato JS delle cose se uno include i file wyishtml5.js e bootstrap.js (attiva / disattiva il .btn"C'è .active Classe CSS).

Inoltre, ecco il jsfiddle che non dimostra ancora il problema, ma ci sto lavorando proprio ora ..

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

risposte:

Ho risposto alla mia domanda. Invece di provare a utilizzare Twitter Bootstrap JS su questi pulsanti, è meglio usare il comportamento JS wysihtml5 che aggiunge la classe wysihtml5-command-active a qualsiasi pulsante attivo.

Quindi per dare uno stile a questi pulsanti tutto ciò che serve per aggiungere il file reset.css è il seguente 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;
}

Quindi non è necessario l'attributo di dati twitter bootstrap.js: data-toggle="buttons-checkbox" e il tuo HTML finale è simile al seguente:

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

Potresti prendere in considerazione l'utilizzo wysihtml5-bootstrap. Integra già wysihtml5 con bootsrap, inclusa l'aggiunta di a btn classe ai pulsanti.