Ruby's Louvre

每天学习一点点算法

导航

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

这部分我们把富文本编辑器的代码打包成一个类。至于如何实现没有什么好说的,就是那五种方案,我取用的是原型,那是最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";
    }
  }

接着下来我们基本就是在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':'查看'
      };

到这里,基本和第二部分差不多了。至于前景色与背景色,我们打算用我以前提供过的颜色选择器实现,现在我们的目标是那两个下拉选择框。我觉得那两个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('');
    }

上面的代码其实有个问题,不过也可能是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';
        }     
        /************略****************/
      }

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

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

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

posted on 2009-08-02 17:44  司徒正美  阅读(8195)  评论(16编辑  收藏  举报