富文本编辑器实现（二）
在上一篇文章中已经介绍了一些在实现一个富文本编辑器时需要用的一些必备知识点。如果不清楚还请参考上一篇文章。
本篇文章会重点介绍编辑器实现的具体过程。
首先来考虑的是编辑的界面。界面包含两个大部分：工具栏和内容编辑区。
内容编辑区比较简单，主要主要组成部分就是一个iframe，当然还要考虑一些样式和行为方面的问题，这部分比较简单。
比较复杂的就是工具栏了，在上一个编辑器设计的时候由于设计的样式问题，导致按钮样式没法有效的通用，所以在这一次设计时让按钮的样式保持统一化，既简化设计又简化实现。
目前按钮主要包含三种形式：一种是直接点击的按钮；一种是有下拉选项的按钮；一种是有弹出内容交换的按钮。所以这里使用了插件的形式来实现工具栏的按钮。
首先是实现了三种插件类和一个插件管理器，根据需要使用的按钮进行实例化并注册到插件管理器中。
先来看一下主体对象Editor，Editor对象主要包含以下属性：
//编辑器的DOM
self.dom = {};
//编辑器对用的textarea的引用
self.textarea = dk.$(textareaId);
//当前是否为设计模式
self.designMode = true;
//编辑配置，包含工具栏按钮等等
self.options = {
otoolbar: [
o['font_family', 'font_size'],
o['bold', 'italic', 'underline', 'del'],
o['font_color', 'bg_color'],
o['aleft', 'acenter', 'aright'],
o['link', 'unlink', 'image'],
o['source']
o]
};
下面看一下Editor对象的初始化函数：
self.init =function(){
o//初始化选项
oself.initOptions();
o//初始化界面
oself.initUI();
o//初始化iframe
oself.initIframe();
o//初始化事件
oself.initEvents();
o//同步内容
oself.syncContent();
};
选项初始化比较简单，下面说一下界面的初始化。界面的初始化就是根据编辑器的DOM结构生成相应的DOM树，唯一有所不同的地方就是工具栏中的按钮是根据Editor.options.toolbar的配置，从插件管理器中获取并插入到文档中的。下一篇文章中会对工具栏的插件机制进行介绍。
接下来是iframe的初始化。要将iframe的document的designMode设置为on碧昂打开文档并写入需要写入的样式等然后关闭。
self.initIframe =function(){
ovar iframe = self.dom.iframe;
ovar doc = iframe.currentDocument || iframe.contentWindow.document;
ovar win = iframe.contentWindow;
odoc.designMode = 'on';
odoc.contentEditable = true;
odoc.charset = "utf-8";
odoc.open();
odoc.write('<!DOCTYPE html><html><head><meta charset="utf-8" /><style>.view{padding:0;word-wrap:break-word;cursor:text;width:100%;height:100%;overflow:hidden;}.viewbody{margin:0;padding:0;width:100%;height:100%;overflow:auto;}p{margin:10px 0;}</style></head><body></body></html>')
odoc.write(self.textarea.value);
odoc.close();
oself.win = win;
oself.doc = doc;
}
再接下来就是事件的初始化，包括iframe的keypress的事件，点击事件，以及在IE中对选中内容的保存等等。
self.initEvents = function(){
o//add editor keyboard events
odk.addEvent(self.doc.body, 'keypress', function(e){
oif(e.which == 13){
oself.doc.execCommand('formatblock', false, '');
o}
o});
o//add editor click events
odk.addEvent(self.doc.body, 'click', function(e){
oself.setStatusBar();
o});
o
odk.addEvent(self.win, 'beforedeactivate', function(e){
o//console.log('before deactivate');
oself.rangeBackup = self.doc.selection.createRange().duplicate();
o//console.log(self.rangeBackup.text);
o});
odk.addEvent(self.win, 'activate', function(e){
o//console.log('activate');
oif(self.rangeBackup){
oself.rangeBackup.select();
o}
o});
}
最后一步就是同步编辑器内容，根据designMode的模式，对编辑器的内容进行同步。
这里简单的说了一下Editor对象的内容。下一篇文章中会对Editor对象的插件内容进行说明。
转载请注明原文出处《富文本编辑器实现（二）》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。