一步步教你实现富文本编辑器（第四部分）

这部分我将详尽讲述如何插入复杂的html内容与取得编辑光标的位置，顺带完成插入表情的功能。由于IE与FF这两个闹别扭，这两步的实现都是完全不一样的。不说废话了！开始吧！

上次我们已经为我们的富文本编辑打造了表格创建器，但还没有绑定事件！我现在分析一下，当我们点击表格创建器的提交按扭，它应该会把其面板上输入的参数传到一个程序去处理，让它生成一个完整的表格的html，然后再插入到光标的所在位置，最后隐藏表格创建器；如果是点击取消按钮，则什么也不做就消失了！那个生成html的程序很简单，我们依然把它做成私有方法：

var _createTable = function(rows, cols, width){
     var builder = [];
     builder.push('<table border="1" width="');
     builder.push(width);
     builder.push('">');
     for(var r = 0; r < rows; r++){
       builder.push('<tr>');
       for(var c = 0; c < cols; c++){
         builder.push('<td> </td>');
       }
       builder.push('</tr>');
     }
     builder.push('</table>');
     return builder.join('');
   };

然后是插入html的方法，我们什么也不处理，看看到底是什么情况。

var _insertHTML = function(html){
       if(!+"\v1"){
        iframeDocument.selection.createRange().pasteHTML(html);       
      }else{
           _format('inserthtml',html);
      }
}

再然后是调用函数，我们把它绑定在onclick事件中！

$.addEvent(tableCreator, 'click', function(){
      var e = arguments[0] || window.event,
      current = e.srcElement ? e.srcElement : e.target,
      submit = $.ID('rte_submit'),
      cancel = $.ID('rte_cancel'),
      rows = $.ID('rows').value,
      cols = $.ID('cols').value,
      width = $.ID('width').value;
      if(current==cancel) {
        this.style.display = 'none';
        return;
      }else if(current==submit){
        var html = _createTable(rows, cols, width);
        _insertHTML(html);
        this.style.display = "none";
      }
    });

window.onload = function(){
                new RichTextEditor({
                    id:'editor',
                    textarea_id:'textarea'
                });
            }

</script>
        <title>富文本编辑器</title>
    </head>
    <body>
        <form action="#">
            <textarea id="textarea" wrap="on"></textarea>
        </form>
    </body>
</html>

发现IE8依然没有反应，FF的最新版本运行良好。下面是分别给出解决的方法。

IE中是利用bookmark对象。这是一个不透明的对象，我们不可以利用toString()方法取得它的内容。它类似google的“网页快照”，能保存我们选中的文本片段。我们可以利用TextRangeName.getbookmark()生成一个bookmark对象，当我们选中文本时，它会自动存入bookmark中。下面是老外给出的有关bookmark的示范。

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style type="text/css">

</style>
    <title>IE的bookmark对象</title>
</head>
<body>
    <h1>Using getBookmark and moveToBookmark</h1>
    </div>
    <p>The getBookmark method doesn't do what you might initially think. It
        doesn't allow you to create a link to an internet shortcut or get one
        from the user's machine. What it does do is create a "snapshot"
        of a selection so you can return to it later. The information returned
        from the getBookmark method is opaque. This means that it is unreadable
    and doesn't have any context on it's own. It can only be used by the moveToBookmark method to move to the saved selection.</p>
    <p><strong>Example:</strong></p>

<input name="btnTest" type="button" id="btnTest" style="width: 75px; height:20px; border:2px outset #CECECE;" value="Get First" onclick="get1()" />
        . This has created a bookmark that has been saved to a variable. Now,
        select another block of text on the page and then click here:

<input name="btnTest2" type="button" id="btnTest2" style="width: 75px; height:20px; border:2px outset #CECECE;" value="Get Second" onclick="get2()" />
        . You now have two bookmarks stored in variables that can be retreived
    at any time.</p>
    <p>

<input name="btnMove2" type="button" id="btnMove2" style="width: 75px; height:20px; border:2px outset #CECECE;" value="Move to 2nd" onclick="move2()" />
    </p>
    <p>An example application of this feature could be a content highlighter
        for your companies intranet. It would allow your employees to browse articles
        and highlight information that they found interesting. The bookmarks to
        this highlighted information could be stored in a database. The next time
        the user browsed to the page you would use moveToBookmark to "relight"
    that information.</p>
    <h3>Problems with getBookmark</h3>
    <p>The biggest problem with using getBookmark is any change that is made
        to the HTML on the page may cause unusual behaviour. Any content within
        a sentence of the content that has been changed will likely cause the
        moveToBookmark method to either select the incorrect text or not work
        at all. This is especially troublesome when using these methods with the
        MSHTML or DEC as the likelihood of the content having changed since you
    bookmarked it is quite likely.</p>
</body>
</html>

接下来就简单了，当文档即将失去焦点时，我们把选项中的文本存在入bookmark对象，当文档再次获得焦点时，我们恢复选中的文本，并在它的后面插入你要插入的内容。

if(!+"\v1"){
  var bookmark;
  //记录IE的编辑光标
  $.addEvent(iframe,"beforedeactivate",function(){//在文档失去焦点之前
    var range = iframeDocument.selection.createRange();
    bookmark= range.getBookmark();
  });
  //恢复IE的编辑光标
  $.addEvent(iframe,"activate",function(){
    if(bookmark){
      var range = iframeDocument.body.createTextRange();
      range.moveToBookmark(bookmark);
      range.select();
      bookmark = null;
    }
  });
}

有关beforedeactivate与activate的用法，可以参考这里与这里

有人可能会问，为什么不用onblur呢？！它们都是在元素失去焦点时激发！那是因为onbeforedeactive有一个很重要的激活条件——"Fires immediately before the active element is changed from the current object to another object in the parent document."而我们的要求也是当我们的鼠标转移到外面的文档时记录光标位置才有意义！

至于FF，我们可以利用selection对象，它和TextRange对象一样，当我们选中文本时，它会自动存入对象中。我们可以用window.getSelection().getRangeAt(0)或window.getSelection().toString()查看到这些选中的内容。然后插入就不是利用execCommand的inserthtml命令了，而是直接利用Range对象编辑selection的文本就是！

我们首先需要把要插入的内容转化为DocumentFragment。我们可以利用range.createContextualFragment(html) 方法，然后利用insertNode方法把DocumentFragment 加入到range中去，然后再用addRange方法，把range添加到selection中去。

var selection = iframe.contentWindow.getSelection();//取得selection(我们刚才选中的文本)
var range;
 if (selection) {//如果selection不为空，就在selection中创建range对象
     range = selection.getRangeAt(0);
 }else {
     range = iframeDocument.createRange();//否则在iframe的document创建一个
 }
 var oFragment = range.createContextualFragment(html),//把插入内容转变为DocumentFragment
 oLastNode = oFragment.lastChild ;//用于修正编辑光标的位置
 range.insertNode(oFragment) ;
 range.setEndAfter(oLastNode ) ;//把编辑光标放到我们插入内容之后
 range.setStartAfter(oLastNode );
 selection.removeAllRanges();//清除所有选择，要不我们插入的内容与刚才的文本处于选中状态
 selection.addRange(range);//插入内容

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style type="text/css">
            #textarea {width:600px;height:300px;background:#F2F1D7;}
        </style>
        <script type="text/javascript">
            var addSheet = function(){
                var doc,cssCode;
                if(arguments.length == 1){
                    doc = document;
                    cssCode = arguments[0];
                }else if(arguments.length == 2){
                    doc = arguments[0];
                    cssCode = arguments[1];
                }else{
                    alert("addSheet函数最多接受两个参数!");
                }
                var headElement = doc.getElementsByTagName("head")[0];
                var styleElements = headElement.getElementsByTagName("style");
                if(styleElements.length == 0){/*如果不存在style元素则创建*/
                    if(!+"\v1"){    //ie
                        doc.createStyleSheet();
                    }else{
                        var tempStyleElement = doc.createElement('style');//w3c
                        tempStyleElement.setAttribute("type", "text/css");
                        headElement.appendChild(tempStyleElement);
                    }
                }
                var  styleElement = styleElements[0];
                var media = styleElement.getAttribute("media");
                if(media != null && !/screen/.test(media.toLowerCase()) ){
                    styleElement.setAttribute("media","screen");
                }
                if(!+"\v1"){    //ie
                    styleElement.styleSheet.cssText += cssCode;
                }else if(/a/[-1]=='a'){
                    styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串
                }else{
                    styleElement.appendChild(doc.createTextNode(cssCode))
                }
            }
            var Class = {
                create: function() {
                    return function() {
                        this.initialize.apply(this, arguments);
                    }
                }
            }
            var extend = function(destination, source) {
                for (var property in source) {
                    destination[property] = source[property];
                }
                return destination;
            }
            var RichTextEditor =  Class.create();//我们的富文本编辑器类
            RichTextEditor.prototype = {
                initialize:function(options){
                    this.setOptions(options);
                    this.drawEditor(this.options.textarea_id);
                },
                setOptions:function(options){
                    this.options = { //这里集中设置默认属性
                        id:'jeditor_'+ new Date().getTime(),
                        textarea_id:null//用于textarea的ID,也就是我们的必选项
                    }
                    extend(this.options, options || {});//这里是用来重写默认属性
                },
                ID:function(id){return document.getElementById(id) },//getElementById的快捷方式
                TN:function(tn){ return document.getElementsByTagName(tn) },//getElementsByTagName的快捷方式
                CE:function(s){ return document.createElement(s)},//createElement的快捷方式
                fontPickerHtml:function(type,array){
                    var builder = [];
                    for(var i = 0,l = array.length;i<l;i++){
                        builder.push('<a unselectable="on" style="');
                        if(type == 'fontname'){
                            builder.push('font-family');
                            builder.push(':');
                            builder.push(array[i]); /*呈现一行（一行就是一种字体）*/
                            builder.push(';" href="javascript:void(0)">');
                            builder.push(array[i]);
                        }else if(type == 'fontsize'){
                            /*呈现一行（一行就是一种字号）*/
                            builder.push('font-size');
                            builder.push(':');
                            builder.push(array[i][1]);
                            builder.push(';" sizevalue="');
                            builder.push(array[i][0]);
                            builder.push('" href="javascript:void(0)">');
                            builder.push(array[i][2]);
                        }
                        builder.push("</a>");
                    }
                    return builder.join('');
                },
                tableHtml: function(){
                    var _drawInput = function(builder, name, value){
                        builder.push('<input id="');
                        builder.push(name);
                        builder.push('" value="');
                        builder.push(value);
                        builder.push('" />');
                    };
                    var builder = [];
                    builder.push('<table>');
                    // 标题
                    builder.push('<tr><td colspan="2" style="padding:2px" bgcolor="#D0E8FC">');
                    builder.push('插入表格');
                    builder.push('</td></tr>');
                    // 行数
                    builder.push('<tr><td>行数</td><td>');
                    _drawInput(builder, 'rows', 3);
                    builder.push('</td></tr>');
                    // 列数
                    builder.push('<tr><td>列数</td><td>');
                    _drawInput(builder, 'cols', 5);
                    builder.push('</td></tr>');
                    // 宽度
                    builder.push('<tr><td>宽度</td><td>');
                    _drawInput(builder, 'width', 300);
                    builder.push('</td></tr>');
                    // 提交
                    builder.push('<tr><td colspan="2" style="padding-top:6px;">');
                    builder.push('<input type="button" id="rte_submit" value="提交" unselectable="on" />');
                    builder.push('<input type="button" id="rte_cancel" value="取消" unselectable="on" />');
                    builder.push('</td></tr>');
                    builder.push('</table>');
                    return builder.join('');
                },
                //用于生成颜色选择器的具体内容
                colorPickerHtml : function(){
                    var  _hex = ['FF', 'CC', '99', '66', '33', '00'];
                    var builder = [];
                    // 呈现一个颜色格
                    var _drawCell = function(builder, red, green, blue){
                        builder.push('<td bgcolor="');
                        builder.push('#' + red + green + blue);
                        builder.push('" unselectable="on"></td>');
                    };
                    // 呈现一行颜色
                    var _drawRow = function(builder, red, blue){
                        builder.push('<tr>');
                        for (var i = 0; i < 6; ++i) {
                            _drawCell(builder, red, _hex[i], blue)
                        }
                        builder.push('</tr>');
                    };
                    // 呈现六个颜色区之一
                    var _drawTable = function(builder, blue){
                        builder.push('<table class="cell" unselectable="on">');
                        for (var i = 0; i < 6; ++i) {
                            _drawRow(builder, _hex[i], blue)
                        }
                        builder.push('</table>');
                    };
                    //开始创建
                    builder.push('<table><tr>');
                    for (var i = 0; i < 3; ++i) {
                        builder.push('<td>');
                        _drawTable(builder, _hex[i]);
                        builder.push('</td>');
                    }
                    builder.push('</tr><tr>');
                    for (var i = 3; i < 6; ++i) {
                        builder.push('<td>');
                        _drawTable(builder, _hex[i])
                        builder.push('</td>');
                    }
                    builder.push('</tr></table>');
                    builder.push('<table id="color_result"><tr><td id="color_view"></td><td id="color_code"></td></tr></table>');
                    return builder.join('');
                },
                addEvent:function(el, type, fn ) {
                    if(!+"\v1") {
                        el['e'+type+fn]=fn;
                        el.attachEvent( 'on'+type, function() {
                            el['e'+type+fn]();
                        } );
                    }else{
                        el.addEventListener( type, fn, false );
                    }
                },
                drawEditor:function(id){
                    var $ = this,
                    textarea = this.ID(id),
                    toolbar = this.CE('div'),
                    br = this.CE('br'),//用于清除浮动
                    iframe = this.CE('iframe');
                    textarea.style.display = "none";
                    textarea.parentNode.insertBefore(toolbar,textarea);
                    textarea.parentNode.insertBefore(br,textarea);
                    textarea.parentNode.insertBefore(iframe,textarea);
                    br.style.cssText = "clear:both";
                    toolbar.setAttribute("id","RTE_toolbar");
                    iframe.setAttribute("id","RTE_iframe");
                    iframe.frameBorder=0;
                    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                    iframeDocument.designMode = "on";
                    iframeDocument.open();
                    iframeDocument.write('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF;border:0; }</style></head></html>');
                    iframeDocument.close();

/********切换回代码界面********************************************/
                    var _doHTML = function() {
                        iframe.style.display = "none";
                        textarea.style.display = "block";
                        textarea.value = iframeDocument.body.innerHTML;
                        textarea.focus();
                    };
                    /********切换回富文本编辑器界面*************************************/
                    var _doRich = function() {
                        iframe.style.display = "block";
                        textarea.style.display = "none";
                        iframeDocument.body.innerHTML = textarea.value;
                        iframe.contentWindow.focus();
                    };
                    /********切换编辑模式的开关*******************************************/
                    var switchEditMode = true;
                    $.addEvent(toolbar['html'], 'click', function(){
                        if(switchEditMode){
                            _doHTML();
                            switchEditMode = false;
                        }else{
                            _doRich();
                            switchEditMode = true;
                        }
                    });
                    /******************************************************************/
                    var tableCreator = $.CE('div');
                    toolbar.appendChild(tableCreator);
                    tableCreator.innerHTML = $.tableHtml();
                    tableCreator.className = 'tablecreator';
                    $.addEvent(toolbar['table'],'click',function(){
                        bind_select_event(this,tableCreator);
                    });

$.addEvent(tableCreator, 'click', function(){
                        var e = arguments[0] || window.event,
                        current = e.srcElement ? e.srcElement : e.target,
                        submit = $.ID('rte_submit'),
                        cancel = $.ID('rte_cancel'),
                        rows = $.ID('rows').value,
                        cols = $.ID('cols').value,
                        width = $.ID('width').value;
                        if(current==cancel) {
                            this.style.display = 'none';
                            return;
                        }else if(current==submit){
                            var html = _createTable(rows, cols, width);
                            _insertHTML(html);
                            this.style.display = "none";
                        }
                    });

}
                    }

/*******************核心代码之一******************************************/
                    /********************处理富文本编辑器的格式化命令**************************/
                    var _format = function(x,y){
                        try{
                            iframeDocument.execCommand(x,false,y);
                            iframe.contentWindow.focus();
                        }catch(e){}
                    }
                    /***********核心代码之二*************************************************/
                    /***********隐藏与显示弹出层**********************************************/
                    var bind_select_event = function(button,picker){
                        button.style.position = 'relative';
                        var command = button.getAttribute("title");
                        if('backcolor' == command){
                            command = !+"\v1" ? 'backcolor':'hilitecolor';
                        }
                        picker.setAttribute("title",command);//转移命令
                        if(picker.style.display == 'none'){
                            picker.style.display = 'block';
                            picker.style.left = button.offsetLeft + 'px';
                            picker.style.top = (button.clientHeight + button.offsetTop)+ 'px';
                        }else{
                            picker.style.display='none';
                        }
                    }
                    /*******************核心代码之三******************************************/
                    /**********************获取iframe的内容************************************/
                    $.addEvent(iframe.contentWindow,"blur",function(){
                        textarea.value = iframeDocument.body.innerHTML;
                    });
                    /*******************核心代码之四******************************************/
                    /*当光标离开iframe再进入时默认放在body的第1个节点上了，所以要记录光标的位置***/
                    if(!+"\v1"){
                        var bookmark;
                        //记录IE的编辑光标
                        $.addEvent(iframe,"beforedeactivate",function(){//在文档失去焦点之前
                            var range = iframeDocument.selection.createRange();
                            bookmark = range.getBookmark();
                        });
                        //恢复IE的编辑光标
                        $.addEvent(iframe,"activate",function(){
                            if(bookmark){
                                var range = iframeDocument.body.createTextRange();
                                range.moveToBookmark(bookmark);
                                range.select();
                                bookmark = null;
                            }
                        });
                    }
                    /****************************************************************/
                    addSheet('\
          #RTE_iframe{width:600px;height:300px;}\
          #RTE_toolbar{float:left;width:600px;background:#D5F3F4;}\
          #RTE_toolbar .button{display:block;float:left;border:1px solid #CCC;margin-left:5px;\
               color:#000;background:#D0E8FC;height:20px;text-align:center;padding:0 10px;white-space: nowrap;}\
          #RTE_toolbar select{float:left;height:20px;width:60px;margin-right:5px;}\
          #RTE_toolbar .button:hover{color:#fff;border-color:#fff #aaa #aaa #fff;}\
          div.fontpicker{display:none;height:150px;overflow:auto;position:absolute;\
             border:2px solid #c3c9cf;background:#F1FAFA;}\
          div.fontpicker a{display:block;text-decoration:none;color:#000;background:#F1FAFA;padding:2px;}\
          div.fontpicker a:hover{color:#999;background:#e3e6e9;}\
          div.colorpicker {display:none;position:absolute;width:216px;border:2px solid #c3c9cf;background:#f8f8f8;}\
          div.colorpicker table{border-collapse:collapse;margin:0;padding:0;}\
          div.colorpicker .cell td{height:12px;width:12px;}\
          #color_result{width:216px;}\
          #color_view{width:110px;height:25px;}\
          div.tablecreator{display:none;width:176px;position:absolute;border:2px solid #c3c9cf;background:#f8f8f8;padding:1px;}\
          div.tablecreator table{border:1px solid #69f;line-height:12px;font-size:12px;border-collapse:collapse;width:100%;}\
          div.tablecreator td{font-size:12px;color:#777;text-align:center;}\
          #rte_submit,#rte_cancel{font-size:12px;color:#777;border:1px solid #777;background-color:#f4f4f4;margin:5px 3px;}\
          #rows, #cols, #width{width:80px;height:14px;line-height:12px;font-size:12px;border:1px solid #69f;}');
                }
            }

window.onload = function(){
                new RichTextEditor({
                    id:'editor',
                    textarea_id:'textarea'
                });
            }
        </script>
        <title>富文本编辑器</title>
    </head>
    <body>
        <form action="#">
            <textarea id="textarea" wrap="on"></textarea>
        </form>
    </body>
</html>

接着下来我们实现一下插入表情的功能。这个和上面插入表格没有什么不一样，只不过现在是插入IMG标签而已。关键的地方是如何保存图片的Url。

iconsHtml : function(){
      var builder = [];
      var j = 0;
      var _drawRow = function(builder,i){
        builder.push('<tr>');
        for(var i=0;i<6;i++){
          j++;
          _drawCell(builder,j);
        }
        builder.push('</tr>');
      }
      var _drawCell = function(builder,j){
        var url = 'http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_face'+j+'.gif';
        builder.push('<td style="background:url('+url+') center center no-repeat; width:21px;height:21px;"');
        builder.push(' url="'+url+'"> </td>')/*★★★这里偷偷保存url★★★*/
      }
      builder.push('<table border=1>');
      for(var i=0 ;i<6;i++){
        _drawRow(builder,i);
      }
      builder.push('</table>');
      return builder.join('')
    },

var iconInsertor = $.CE('div');
toolbar.appendChild(iconInsertor);
iconInsertor.innerHTML = $.iconsHtml();
iconInsertor.className = 'emoticons';
//点击按钮显现表情插入器
$.addEvent(toolbar['emoticons'],'click',function(){
  bind_select_event(this,iconInsertor);
});
$.addEvent(iconInsertor, 'click', function(e){
  var e = arguments[0] || window.event,
  current = e.srcElement ? e.srcElement : e.target,
  td = current.nodeName.toLowerCase();
  if(td == 'td'){
    var k = current.getAttribute("url");
    _insertHTML("<img src='"+k+"'/>");/*★★★取出url★★★*/
    iconInsertor.style.display = "none";
  }
});

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style type="text/css">
            #textarea {width:600px;height:300px;background:#F2F1D7;}
        </style>
        <script type="text/javascript">
  var addSheet = function(){
    var doc,cssCode;
    if(arguments.length == 1){
      doc = document;
      cssCode = arguments[0];
    }else if(arguments.length == 2){
      doc = arguments[0];
      cssCode = arguments[1];
    }else{
      alert("addSheet函数最多接受两个参数!");
    }
    var headElement = doc.getElementsByTagName("head")[0];
    var styleElements = headElement.getElementsByTagName("style");
    if(styleElements.length == 0){/*如果不存在style元素则创建*/
      if(!+"\v1"){    //ie
        doc.createStyleSheet();
      }else{
        var tempStyleElement = doc.createElement('style');//w3c
        tempStyleElement.setAttribute("type", "text/css");
        headElement.appendChild(tempStyleElement);
      }
    }
    var  styleElement = styleElements[0];
    var media = styleElement.getAttribute("media");
    if(media != null && !/screen/.test(media.toLowerCase()) ){
      styleElement.setAttribute("media","screen");
    }
    if(!+"\v1"){    //ie
      styleElement.styleSheet.cssText += cssCode;
    }else if(/a/[-1]=='a'){
      styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串
    }else{
      styleElement.appendChild(doc.createTextNode(cssCode))
    }
  }
  var Class = {
    create: function() {
      return function() {
        this.initialize.apply(this, arguments);
      }
    }
  }
  var extend = function(destination, source) {
    for (var property in source) {
      destination[property] = source[property];
    }
    return destination;
  }
  var RichTextEditor =  Class.create();//我们的富文本编辑器类
  RichTextEditor.prototype = {
    initialize:function(options){
      this.setOptions(options);
      this.drawEditor(this.options.textarea_id);
    },
    setOptions:function(options){
      this.options = { //这里集中设置默认属性
        id:'jeditor_'+ new Date().getTime(),
        textarea_id:null//用于textarea的ID,也就是我们的必选项
      }
      extend(this.options, options || {});//这里是用来重写默认属性
    },
    ID:function(id){return document.getElementById(id) },//getElementById的快捷方式
    TN:function(tn){ return document.getElementsByTagName(tn) },//getElementsByTagName的快捷方式
    CE:function(s){ return document.createElement(s)},//createElement的快捷方式
    fontPickerHtml:function(type,array){
      var builder = [];
      for(var i = 0,l = array.length;i<l;i++){
        builder.push('<a unselectable="on" style="');
        if(type == 'fontname'){
          builder.push('font-family');
          builder.push(':');
          builder.push(array[i]); /*呈现一行（一行就是一种字体）*/
          builder.push(';" href="javascript:void(0)">');
          builder.push(array[i]);
        }else if(type == 'fontsize'){
          /*呈现一行（一行就是一种字号）*/
          builder.push('font-size');
          builder.push(':');
          builder.push(array[i][1]);
          builder.push(';" sizevalue="');
          builder.push(array[i][0]);
          builder.push('" href="javascript:void(0)">');
          builder.push(array[i][2]);
        }
        builder.push("</a>");
      }
      return builder.join('');
    },
    iconsHtml : function(){
      var builder = [];
      var j = 0;
      var _drawRow = function(builder,i){
        builder.push('<tr>');
        for(var i=0;i<6;i++){
          j++;
          _drawCell(builder,j);
        }
        builder.push('</tr>');
      }
      var _drawCell = function(builder,j){
        var url = 'http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_face'+j+'.gif';
        builder.push('<td style="background:url('+url+') center center no-repeat; width:21px;height:21px;"');
        builder.push(' url="'+url+'"> </td>')
      }
      builder.push('<table border=1>');
      for(var i=0 ;i<6;i++){
        _drawRow(builder,i);
      }
      builder.push('</table>');
      return builder.join('')
    },
    tableHtml: function(){
      var _drawInput = function(builder, name, value){
        builder.push('<input id="');
        builder.push(name);
        builder.push('" value="');
        builder.push(value);
        builder.push('" />');
      };
      var builder = [];
      builder.push('<table>');
      // 标题
      builder.push('<tr><td colspan="2" style="padding:2px" bgcolor="#D0E8FC">');
      builder.push('插入表格');
      builder.push('</td></tr>');
      // 行数
      builder.push('<tr><td>行数</td><td>');
      _drawInput(builder, 'rows', 3);
      builder.push('</td></tr>');
      // 列数
      builder.push('<tr><td>列数</td><td>');
      _drawInput(builder, 'cols', 5);
      builder.push('</td></tr>');
      // 宽度
      builder.push('<tr><td>宽度</td><td>');
      _drawInput(builder, 'width', 300);
      builder.push('</td></tr>');
      // 提交
      builder.push('<tr><td colspan="2" style="padding-top:6px;">');
      builder.push('<input type="button" id="rte_submit" value="提交" unselectable="on" />');
      builder.push('<input type="button" id="rte_cancel" value="取消" unselectable="on" />');
      builder.push('</td></tr>');
      builder.push('</table>');
      return builder.join('');
    },
    //用于生成颜色选择器的具体内容
    colorPickerHtml : function(){
      var  _hex = ['FF', 'CC', '99', '66', '33', '00'];
      var builder = [];
      // 呈现一个颜色格
      var _drawCell = function(builder, red, green, blue){
        builder.push('<td bgcolor="');
        builder.push('#' + red + green + blue);
        builder.push('" unselectable="on"></td>');
      };
      // 呈现一行颜色
      var _drawRow = function(builder, red, blue){
        builder.push('<tr>');
        for (var i = 0; i < 6; ++i) {
          _drawCell(builder, red, _hex[i], blue)
        }
        builder.push('</tr>');
      };
      // 呈现六个颜色区之一
      var _drawTable = function(builder, blue){
        builder.push('<table class="cell" unselectable="on">');
        for (var i = 0; i < 6; ++i) {
          _drawRow(builder, _hex[i], blue)
        }
        builder.push('</table>');
      };
      //开始创建
      builder.push('<table><tr>');
      for (var i = 0; i < 3; ++i) {
        builder.push('<td>');
        _drawTable(builder, _hex[i]);
        builder.push('</td>');
      }
      builder.push('</tr><tr>');
      for (var i = 3; i < 6; ++i) {
        builder.push('<td>');
        _drawTable(builder, _hex[i])
        builder.push('</td>');
      }
      builder.push('</tr></table>');
      builder.push('<table id="color_result"><tr><td id="color_view"></td><td id="color_code"></td></tr></table>');
      return builder.join('');
    },
    addEvent:function(el, type, fn ) {
      if(!+"\v1") {
        el['e'+type+fn]=fn;
        el.attachEvent( 'on'+type, function() {
          el['e'+type+fn]();
        } );
      }else{
        el.addEventListener( type, fn, false );
      }
    },
    drawEditor:function(id){
      var $ = this,
      textarea = this.ID(id),
      toolbar = this.CE('div'),
      br = this.CE('br'),//用于清除浮动
      iframe = this.CE('iframe');
      textarea.style.display = "none";
      textarea.parentNode.insertBefore(toolbar,textarea);
      textarea.parentNode.insertBefore(br,textarea);
      textarea.parentNode.insertBefore(iframe,textarea);
      br.style.cssText = "clear:both";
      toolbar.setAttribute("id","RTE_toolbar");
      iframe.setAttribute("id","RTE_iframe");
      iframe.frameBorder=0;
      var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      iframeDocument.designMode = "on";
      iframeDocument.open();
      iframeDocument.write('<html><head><style type="text/css">body{ font-family:arial; font-size:13px;background:#DDF3FF;border:0; }</style></head></html>');
      iframeDocument.close();

/********切换回代码界面********************************************/
      var _doHTML = function() {
        iframe.style.display = "none";
        textarea.style.display = "block";
        textarea.value = iframeDocument.body.innerHTML;
        textarea.focus();
      };
      /********切换回富文本编辑器界面*************************************/
      var _doRich = function() {
        iframe.style.display = "block";
        textarea.style.display = "none";
        iframeDocument.body.innerHTML = textarea.value;
        iframe.contentWindow.focus();
      };
      /********切换编辑模式的开关*******************************************/
      var switchEditMode = true;
      $.addEvent(toolbar['html'], 'click', function(){
        if(switchEditMode){
          _doHTML();
          switchEditMode = false;
        }else{
          _doRich();
          switchEditMode = true;
        }
      });
      /****************************************************************/
      // iconInsertor.style.cssText = "display:none;width:150px;height:150px;background::#f8f8f8;position:absolute;";
      //生成并隐藏表情插入器
      var iconInsertor = $.CE('div');
      toolbar.appendChild(iconInsertor);
      iconInsertor.innerHTML = $.iconsHtml();
      iconInsertor.className = 'emoticons';
      //点击按钮显现表情插入器
      $.addEvent(toolbar['emoticons'],'click',function(){
        bind_select_event(this,iconInsertor);
      });
      $.addEvent(iconInsertor, 'click', function(e){
        var e = arguments[0] || window.event,
        current = e.srcElement ? e.srcElement : e.target,
        td = current.nodeName.toLowerCase();
        if(td == 'td'){
          var k = current.getAttribute("url");/*★★★取出url★★★*/
          _insertHTML("<img src='"+k+"'/>");
          iconInsertor.style.display = "none";
        }
      });
      /******************************************************************/
      var tableCreator = $.CE('div');
      toolbar.appendChild(tableCreator);
      tableCreator.innerHTML = $.tableHtml();
      tableCreator.className = 'tablecreator';
      $.addEvent(toolbar['table'],'click',function(){
        bind_select_event(this,tableCreator);
      });

}
      }

/*******************核心代码之一******************************************/
      /********************处理富文本编辑器的格式化命令**************************/
      var _format = function(x,y){
        try{
          iframeDocument.execCommand(x,false,y);
          iframe.contentWindow.focus();
        }catch(e){}
      }
      /***********核心代码之二*************************************************/
      /***********隐藏与显示弹出层**********************************************/
      var bind_select_event = function(button,picker){
        button.style.position = 'relative';
        var command = button.getAttribute("title");
        if('backcolor' == command){
          command = !+"\v1" ? 'backcolor':'hilitecolor';
        }
        picker.setAttribute("title",command);//转移命令
        if(picker.style.display == 'none'){
          picker.style.display = 'block';
          picker.style.left = button.offsetLeft + 'px';
          picker.style.top = (button.clientHeight + button.offsetTop)+ 'px';
        }else{
          picker.style.display='none';
        }
      }
      /*******************核心代码之三******************************************/
      /**********************获取iframe的内容************************************/
      $.addEvent(iframe.contentWindow,"blur",function(){
        textarea.value = iframeDocument.body.innerHTML;
      });
      /*******************核心代码之四******************************************/
      /*当光标离开iframe再进入时默认放在body的第1个节点上了，所以要记录光标的位置***/
      if(!+"\v1"){
        var bookmark;
        //记录IE的编辑光标
        $.addEvent(iframe,"beforedeactivate",function(){//在文档失去焦点之前
          var range = iframeDocument.selection.createRange();
          bookmark = range.getBookmark();
        });
        //恢复IE的编辑光标
        $.addEvent(iframe,"activate",function(){
          if(bookmark){
            var range = iframeDocument.body.createTextRange();
            range.moveToBookmark(bookmark);
            range.select();
            bookmark = null;
          }
        });
      }
      /****************************************************************/
      addSheet('\
          #RTE_iframe{width:600px;height:300px;}\
          #RTE_toolbar{float:left;width:600px;background:#D5F3F4;}\
          #RTE_toolbar .button{display:block;float:left;border:1px solid #CCC;margin-left:5px;\
               color:#000;background:#D0E8FC;height:20px;text-align:center;padding:0 10px;white-space: nowrap;}\
          #RTE_toolbar select{float:left;height:20px;width:60px;margin-right:5px;}\
          #RTE_toolbar .button:hover{color:#fff;border-color:#fff #aaa #aaa #fff;}\
          div.fontpicker{display:none;height:150px;overflow:auto;position:absolute;\
             border:2px solid #c3c9cf;background:#F1FAFA;}\
          div.fontpicker a{display:block;text-decoration:none;color:#000;background:#F1FAFA;padding:2px;}\
          div.fontpicker a:hover{color:#999;background:#e3e6e9;}\
          div.colorpicker {display:none;position:absolute;width:216px;border:2px solid #c3c9cf;background:#f8f8f8;}\
          div.colorpicker table{border-collapse:collapse;margin:0;padding:0;}\
          div.colorpicker .cell td{height:12px;width:12px;}\
          #color_result{width:216px;}\
          #color_view{width:110px;height:25px;}\
          div.tablecreator{display:none;width:176px;position:absolute;border:2px solid #c3c9cf;background:#f8f8f8;padding:1px;}\
          div.tablecreator table{border:1px solid #69f;line-height:12px;font-size:12px;border-collapse:collapse;width:100%;}\
          div.tablecreator td{font-size:12px;color:#777;text-align:center;}\
          #rte_submit,#rte_cancel{font-size:12px;color:#777;border:1px solid #777;background-color:#f4f4f4;margin:5px 3px;}\
          #rows, #cols, #width{width:80px;height:14px;line-height:12px;font-size:12px;border:1px solid #69f;}\
          div.emoticons {display:none;position:absolute;width:150px;height:150px;background::#f8f8f8;}');
    }
  }

window.onload = function(){
    new RichTextEditor({
      id:'editor',
      textarea_id:'textarea'
    });
  }
        </script>
        <title>富文本编辑器</title>
    </head>
    <body>
        <form action="#">
            <textarea id="textarea" wrap="on"></textarea>
        </form>
    </body>
</html>

好了，这部分就到此为止。下次再见！也请希望各位厚道点，多多推荐，多多讨论，让我的博客人气旺点！