3

wysihtml5ツールバーでTwitterブートストラップボタンを使用しようとしています。私の単純な問題は、ボタンのCSSがツールバーexec()コマンドの反対に切り替わるということです。したがって、太字のボタンをクリックすると、ボタンはアクティブ状態クラスを取得しますが、2番目のボタンをクリックするまでテキストは太字になりません。2番目のボタンをクリックすると、ボタンはアクティブ状態を失います。そのため、CSSとJSはフェーズがずれています。

考え？

これが、wyishtml5.jsファイルとbootstrap.jsファイル（.btnのget .activeCSSクラスを切り替える）が含まれている場合に、JS側で実際に必要なすべてのHTMLです。

また、これはまだ問題を示していない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>
4

2 に答える 2

4

私は自分の質問に答えました。wysihtml5-command-activeこれらのボタンで Twitter ブートストラップ JS を使用しようとする代わりに、アクティブなボタンにクラスを追加する wysihtml5 JS 動作を使用することをお勧めします。

したがって、これらのボタンのスタイルを設定するには、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>
于 2012-12-04T00:06:53.837 に答える
0

wysihtml5-bootstrap の使用を検討してください。btnボタンにクラスを追加するなど、すでに wysihtml5 をブートストラップと統合しています。

于 2013-01-13T12:17:23.843 に答える