Twitter Bootstrap按鈕複選框在製作wysiwyg文本編輯器時切換問題

Question

我想製作一個簡單的文本編輯器，讓人們可以使字體變成粗體，斜體或下劃線。我有點困惑於如何使用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 

我覺得我需要有一個像這樣爲每個字體樣式代碼：粗體，斜體，下劃線我切換。但是，正如你所看到的，我只是想讓文本變成粗體字（更不用說不起作用），所以必須有更好的方法。任何想法將不勝感激。

Answer 1

編輯內容的一個更好的方法是使用contentEditable屬性，因爲它在瀏覽器和各種命令（execCommand）之間提供了很好的支持，可以執行編輯內容，更多信息請參閱execCommand。

這裏是一個簡短的演示中，我對如何去做：

Demo

相關代碼：

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(); 
    }); 
});