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

这部分我们把富文本编辑器的代码打包成一个类。至于如何实现没有什么好说的，就是那五种方案，我取用的是原型，那是最JS，也是最ruby的。我们的所有实现都在原型进行，最后new出来就是！构造函数有一个必选参数，就是那个textarea的id，其他都是动态生成的，包括其样式。关于样式，我已提供了一个很好用的addSheet函数了。那么开始吧，我们要尽快做出第二部分最后阶段的样式再说！

首先我为大家提供了一个模板，大家可以根据它自行完成我们讲过的部分。

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的快捷方式
    drawEditor:function(id){
      var textarea = this.ID(id);
      textarea.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">
        <script type="text/javascript">
            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的快捷方式
                drawEditor:function(id){
                    var textarea = this.ID(id);
                    textarea.style.display = "none";
                }
            }
            window.onload = function(){
                new RichTextEditor({
                    id:'editor',
                    textarea_id:'textarea'
                });
            }
        </script>
        <title>富文本编辑器</title>
    </head>
    <body>
        <h1>这是模板</h1>
        <form action="#">
            <textarea id="textarea"></textarea>
        </form>
    </body>
</html>

接着下来我们基本就是在drawEditor这个函数工作了，我们隐藏了原来的textarea后，然后在其下面生成一个div，当作富本文编辑器的工具栏，然后再在其下面生成iframe，这是我们富文本编辑器的工作区。工具栏的按钮很多，我们把这些按钮的名字以及隐藏在title的命令全部打包在一个对象，然后循环生成它们，并在循环中设置样式与绑定事件。这些和第二部分所讲的别无二致，我就不重复了，快手净脚搞出它们吧！

var buttons = {
     'fontname': {
       '宋体':'SimSun',
       '隶书':'LiSu',
       '楷体':'KaiTi_GB2312',
       '幼圆':'YouYuan',
       '黑体':'SimHei',
       '雅黑':'Microsoft YaHei',
       '仿宋':'FangSong',
       'Comic Sans MS':'Comic Sans MS'
     },
     'fontsize': {
       '特小': 1,
       '很小': 2,
       '小': 3,
       '中': 4,
       '大': 5,
       '很大': 6,
       '特大':7
     },
     'removeformat':'还原',
     'bold': '加粗',
     'italic': '斜体',
     'underline': '下划线',
     'strikethrough':'删除线',
     'justifyleft': '居左',
     'justifycenter': '居中',
     'justifyright': '居右',
     'indent':'缩进',
     'outdent':'悬挂',
     'forecolor':'前景色',
     'backcolor':'背景色',
     'createlink': '超链接',
     'insertimage': '插图',
     'insertorderedlist':'有序列表',
     'insertunorderedlist':'无序列表',
     'html':'查看'
   };

<!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;
            }

到这里，基本和第二部分差不多了。至于前景色与背景色，我们打算用我以前提供过的颜色选择器实现，现在我们的目标是那两个下拉选择框。我觉得那两个select太不人性化了，由于其级别很高，我们很难对它进行制定。作为可见即可得，我们要来在拉动那个select时，应该能给人们一个大概样子。因此select必须死。

我们修改buttons对象，把fontname与fontsize提取出来单独处理！

var fontFamilies = ['宋体','经典中圆简','微软雅黑', '黑体', '楷体', '隶书', '幼圆',
        'Arial', 'Arial Narrow', 'Arial Black', 'Comic Sans MS',
        'Courier New', 'Georgia', 'New Roman Times', 'Verdana']
var fontSizes= [[1, 'xx-small', '最小'],
        [2, 'x-small', '特小'],
        [3, 'small', '小'],
        [4, 'medium', '中'],
        [5, 'large', '大'],
        [6, 'x-large', '特大'],
        [7, 'xx-large', '最大']];

但是这样一来，我们原来的事件绑定机制就遭到灭顶之灾！我们必须奠出我们的addEvent函数。addEvent要求我们传入三个参数(需要绑定的元素，事件类型与绑定事件)，后两个很明确了，问题是第一个，我们怎么找到这些元素呢？不过一个个加id吧。不用，我们在最开始的循环就把这些元素加入一个数组就是！

  for (var i in buttons){/*添加命令按钮的名字，样式*/
    var button = buttonClone.cloneNode("true");
    if(i == 'backcolor'){/*特殊处理背景色按钮*/
      if (!+"\v1"){
        button.setAttribute("title","background")
      }else{
        button.setAttribute("title","hilitecolor")
      }
    }
    button.setAttribute("title",i);/*把execCommand的命令参数放到title*/
    button.innerHTML = buttons[i];
    button.setAttribute("unselectable", "on");/*防止焦点转移到点击的元素上，从而保证文本的选中状态*/
    toolbar[i] = button;   /*★★★★把元素放进一个数组，用于事件绑定！★★★★*/
    fragment.appendChild(button);
  }
  toolbar.appendChild(fragment);
}

得益于javascript的事件机制，我们只对toolbar进行监听，就可以监听其所有子元素。另外，我们把格式化命令独立出来，简化我们的程序。

this.addEvent(toolbar, 'click', function(){
   var e = arguments[0] || window.event,
   target = e.srcElement ? e.srcElement : e.target,
   command = target.getAttribute("title");
   switch (command){
     case 'createlink':
     case 'insertimage':
       var value = prompt('请输入网址:', 'http://');
       _format(command,value);
       break;
     case 'fontname'://这几个特殊处理
     case 'fontsize':
     case 'forecolor':
     case 'backcolor':
     case 'html':
       return;
     default:
       _format(command,'');
       break;
   }
 });
  
 var _format = function(x,y){//内部私有函数，处理富文本编辑器的格式化命令
   iframeDocument.execCommand(x,false,y);
   iframe.contentWindow.focus();
 }

至于字体与字码，我们可以用div模拟select了！然后为它们绑定两个事件，一个是用来显示隐藏select，一个是用来执行格式化命令。

  var fontPicker = $.CE('div');
  fontPicker.setAttribute('unselectable', 'on');
  fontPicker.className = "fontpicker";
  toolbar.appendChild(fontPicker);//字体选择器与字码选择器都是共用一个虚拟select
  $.addEvent(toolbar['fontname'], 'click', function(){
    //根据情况选择载入虚拟select的内容
  })
 
  $.addEvent(toolbar['fontsize'], 'click', function(){
    //根据情况选择载入虚拟select的内容
  })
  var bind_select_event = function(button,picker){
    //显示或隐藏文字选择器
  }
  /************************用于生成文字选择器的内容************************/
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)">');//IE的a元素必须有href才有悬浮效果
      builder.push(array[i][2]);
    }
    builder.push("</a>");
  }
  return builder.join('');
}

<!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;
  }

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

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>

上面的代码其实有个问题，不过也可能是IE的问题，在IE中，当我们点击虚拟select的a元素时，execComman函数实际执行了两次，第一次确实是完成了格式化任务，第二次却因为参数为空而报错……囧！我不知道是哪里错了，不过我认为如果我们把事件直接绑定到a元素，而不是绑定到虚拟select的那个div元素，就肯定没问题。不过这样做代码非常复杂非常长，如何定位到这些a元素就要劳师动众一番。我是利用DOM2的事件传播机制缩短它的（嗯，写到这里，我好像明白了一些）。我用了一个很不值得推荐的方法，把execComman放到一个catch块中，吞掉这异常。

更好的办法，我想到了。execCommand之所以执行发两次，是因为IE并没有阻止onclick事件继续向上冒泡，之于为什么会冒泡呢？！这又是个谜了！这是新的代码：

$.addEvent(fontPicker,'click',function(){
     /*****************略************/
     _format(command,value);
     e.cancelBubble = true;//重点
     fontPicker.style.display = 'none';
   }
  });
 var _format = function(x,y){//内部私有函数，处理富文本编辑器的格式化命令
//    try{
     iframeDocument.execCommand(x,false,y);
     iframe.contentWindow.focus();
 //    }catch(e){}
 }

接着下来是背景色与前景色，以前我就做了一个颜色选择器，具体可参见这篇博文，我就不重复了！流程基本与文字选择器一样，我们这里得修改一下bind_select_event方法。

var bind_select_event = function(button,picker){//显示或隐藏选择器
  button.style.position = 'relative';
  var command = button.getAttribute("title");
  if('backcolor' == command){
     command = !+"\v1" ? 'backcolor':'hilitecolor';
  }     
  /************略****************/
}

<!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;
  }

//用于生成颜色选择器的具体内容
    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();

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>

紧接着是查看按钮，这个简单，这里我把封装一下，让它看起来不那么乱。

/********切换回代码界面*************/
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;
  }
});

但这个不保证我们提交表单时textarea有东西，我们在iframe失去焦点时偷偷转移东西给textarea。这里的问题第二部分已详细提过，这里就不重复了

$.addEvent(iframe.contentWindow,"blur",function(){
   textarea.value = iframeDocument.body.innerHTML;
 });

“接着下来我们开始讲解复杂插入吧……”正想这样说，一看篇幅，改写成类比预期的费笔墨，今天就先开过头，下次再说。

我们先多添加一个按钮，用于插入表格，点击它将弹出一个层，上面要求我们填写将要生成的表格的参数。

var buttons = {//工具栏的按钮集合
 /*********略************/
   'table':'插入表格',
   'html':'查看'
 };

var tableCreator = $.CE('div');
     tableCreator.className = 'tablecreator';
     toolbar.appendChild(tableCreator);
     tableCreator.innerHTML = $.tableHtml();
     $.addEvent(toolbar['table'],'click',function(){
       bind_select_event(this,tableCreator);
     });

<!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;
  }

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>

最后留个作业，希望各位博友们思考一下如何创建表格，并把插入到编辑光标之前。那么下一部分再见！