4

単純なテキスト エディタを作成して、人々がフォントを太字、斜体、または下線付きにできるようにしたいと考えています。Twitterのブートストラップのボタンで「アクティブ」クラスを使用して、テキストエリア内の単語にさまざまなフォントスタイルを追加するなどの機能を切り替える方法について、少し混乱しています。

ここに私のHTMLがあります:

<span class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn btn-bold">Bold</button>
  <button class="btn btn-italics">Italics</button>
  <button class="btn btn-underline">Underline</button>
</span>    

<textarea></textarea>

ここに私のJSがあります：

        $('.btn').click(function(){         
          if($('.btn-bold').hasClass('active')){                
            $('.btn-bold').toggle(
                 function() {
                     $('textarea').val($('textarea').val()+"<span style='font-weight:bold'>");}, 
                 function() {                     
                     $('textarea').val($('textarea').val()+"</span>");
            }); //toggle
          } //if
        });  //click

フォントスタイルごとに次のようなコードが必要だと思います:太字、斜体、下線を切り替えます。しかし、テキストを太字にするためだけに私が持っていることがわかるように、非常に冗長です (言うまでもなく、機能しません) ので、より良い方法が必要です。どんな考えでも大歓迎です。

4

1 に答える 1

3

コンテンツを編集するためのより良い方法は、contentEditable属性を使用することです。これは、ブラウザー全体で優れたサポートがあり、execCommandコンテンツを編集するために実行できるコマンド ( ) の選択肢が豊富なためです。詳細については、 を参照してくださいexecCommand。

以下は、その方法について私が作成した短いデモです。

デモ

関連コード:

JS

var current;
$(function() {
    $("div[contenteditable]").focus(function() {
        current = this;
    });

    // bold
    $('.btn-bold').click(function() {
        document.execCommand('bold', false, null);
        $(current).contents().focus();
    });

    //italics
    $('.btn-italics').click(function() {
        document.execCommand('italic', false, null);
        $(current).contents().focus();
    });

    //underline
    $('.btn-underline').click(function() {
        document.execCommand('underline', false, null);
        $(current).contents().focus();
    });
});
于 2012-03-16T16:38:20.327 に答える