打造夠我用的文本編輯器

主要借鑒博客園的，還要少部分CSDN的,只是將它們糅合到一起
最近在做一個類似webparts中的東東，就是用戶可以對頁面中的一些標題自定義字體顏色樣式。以及向頁面中插入一些內容。所以自己做了一個文本編輯器，說到做還不如說是東拼西湊的產物，好了啰嗦了那么多，該說主要內容了。

先看張效果圖

看到效果圖，相信大家對這個文本編輯器應該已經了解個大概了，大家都不是智商低的人，我就不在大家面前班門弄斧，解說一遍了，不過有一點要和大家說一下，就是這個文本編輯器的編輯字體顏色的那個其實是一個Color：顏色選擇控件，我在這里找到的， Color：顏色選擇控件 本來圖標不是這樣的，我從另一個顏色選擇控件中找到的，如果大家點擊了這個網站，去看看就知道了，還有我這個和原來的不一樣，是經過我自己加工的，當然加工是為了適應需求。說了那么多，上代碼吧。

引用內容：

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script src="iColorPicker.js" type="text/javascript"></script>

前台代碼：

<div style="width:406px;height:357px; border:solid 1px #000">
    <div>
        <input id="btnEdit" type="button" value="編輯" onclick="hidePreview()"/>
        <input id="btnPreview" type="button" value="預覽" onclick="showPreview()"/>
    </div>
    <div class="commentbox_title_right">
        <img alt="bold" src="img/bold.gif" onclick="insertUBB('tbCommentBody','b')" />
        <img alt="Italic" src="img/italic.gif" onclick="insertUBB('tbCommentBody','i')"/>
        <img alt="UnderLine" src="img/underline.gif" onclick="insertUBB('tbCommentBody','u')"/>
        <img alt="link" src="img/lk.png" onclick="insertUbbUrl('tbCommentBody')"/>
        <input  id="txtcolor" name="mycolor" style="width:65px; height: 20px; display:none" type="text" value="#ffcc00" class="iColorPicker" /> 
     <textarea id="tbCommentBody" rows="10" style="width: 400px; height: 260px; border:solid 1px #999">
       值類型不能派生出其他類型，因為它是隱式密封(sealed)的，所以它並沒有引用類型實例對象開頭的額外信息(用於標識對象的實際類型和其他信息)，即類型對象指針和同步塊索引。這些額外信息並不能修改，所以我們永遠也不能修改對象的類型，但我們可以轉換為其他類型。執行強制類型轉換時，我們會獲取一個引用，該引用會檢查它引用的對象本身是否是該目標類型的有效對象，若是，返回該引用並賦給目標類型，否則拋出異常。引用並不清楚它實際引用的對象的類型，所以我們的引用可以指向其他類型
    </textarea>
    </div>
    <div class="preview_div" style="min-height: 300px; display: none;border:solid 1px #000"></div>
</div>

主要Js：

<script type="text/javascript">
$.fn.extend({
     selection: function() {
         var txt = '';
         var doc = this.get(0).document;
         if (doc) {
             var sel = doc.selection.createRange();
             if (sel.text.length > 0)
                 txt = sel.text;
         }
         else if (this.get(0).selectionStart || this.get(0).selectionStart == '0') {
             var s = this.get(0).selectionStart;
             var e = this.get(0).selectionEnd;
             if (s != e) {
                 txt = this.get(0).value.substring(s, e);
             }
         }
         return $.trim(txt);
     },
     parseHtml: function(t) {
         var doc = this.get(0).document;
         if (doc) {
             this.get(0).focus();
             doc.selection.createRange().collapse;
             this.get(0).document.selection.createRange().text = t;
         }
         else if (this.get(0).selectionStart || this.get(0).selectionStart == '0') {
             var s = this.get(0).selectionStart;
             var e = this.get(0).selectionEnd;
             var val = this.get(0).value;
             var start = val.substring(0, s);
             var end = val.substring(e);
             this.get(0).value = start + t + end;
         }
     }
 })

 var insertUBB = function(id, html) {
     var val = $('#' + id).selection();
     if (val == '') {
         alert('請選擇文字');
     }
     else {
         var end = html;
         if (html.indexOf('=') >= 0)
             end = html.substring(0, html.indexOf('='));
         $('#' + id).parseHtml('[' + html + ']' + val + '[/' + end + ']');
     }
 }
//插入字體顏色
 var insertUBBColor = function(id, html,color) {
     var val = $('#' + id).selection();
     if (val == '') {
         alert('請選擇文字');
     }
     else {
         var end = html;
         if (html.indexOf('=') >= 0)
             end = html.substring(0, html.indexOf('='));
         $('#' + id).parseHtml('[' + html + '=' + color + ']' + val + '[/' + end + ']');
     }
 }
 
 function insertUbbUrl(id) {
     var p1 = prompt("顯示鏈接的文本.\n如果為空，那么將只顯示超級鏈接地址", "");
     if (p1 != null) {
         var p2 = prompt("http:// 超級鏈接", "http://");
         if (p2 != '' && p2 != 'http://') {
             if (p1 != '') {
                 $('#' + id).parseHtml('[url=' + p2 + ']' + p1 + '[/url]');
             }
             else {
                 $('#' + id).parseHtml('[url]' + p2 + '[/url]');
             }
         }
     }
 }
//切換到預覽狀態
 function showPreview() {

     var content = $('#tbCommentBody').val();
     $('.preview_div').html('');
     $('.preview_div').html(content);
     $('.commentbox_title_right').hide();
     $('.preview_div').show();

 }
 //隱藏預覽div
 function hidePreview() {
     $('.commentbox_title_right').show();
     $('.preview_div').hide();
 }
</script>

不過有一點我不知道怎么做，就是圖中的預覽功能，在編輯的時候加入的粗體，斜體等樣式設置，不能出現效果，上圖，其中的[b][/b] 是粗體，本來夾在中間的字應該顯示粗體的,但沒有所以請大家指教！