一步步教你实现富文本编辑器（第三部分）
这部分我们把富文本编辑器的代码打包成一个类。至于如何实现没有什么好说的，就是那五种方案，我取用的是原型，那是最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);
});
最后留个作业，希望各位博友们思考一下如何创建表格，并把插入到编辑光标之前。那么下一部分再见！
浙公网安备 33010602011771号