打造够我用的文本编辑器

主要借鉴博客园的，还要少部分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] 是粗体，本来夹在中间的字应该显示粗体的,但没有所以请大家指教！