富文本编辑器实现（一）
这里简单的聊一下如何实现一个简单的富文本编辑器。见以前的文章动手做一个在线富文本编辑器。
1.富文本编辑器的基础
document对象有一个designMode属性，你可以使用这个属性来让当前的document进入可编辑模式。
当进入可编辑模式时，整个文档可以获取焦点并可以进行编辑，同样你也可以执行脚本来控制。
这一属性是IE首先支持的，在Mozilla1.3中也引入此属性来用于富文本编辑器的实现。这一点是我们用于实现富文本编辑器的基础，有了这个我们才能进行下一步的工作。
这里我们在页面中创建了一个iframe来作为编辑器的主体。
var iframe = document.createElement('iframe');
var idoc = iframe.currentDocument || iframe.contentWindow.document;
var iwin = iframe.contentWindow;
var idoc.designMode = 'on';
idoc.open();
idoc.write('');
idoc.close();
2.在编辑器中执行命令
在编辑器中要对选中的内容进行操作需要使用到execCommand方法。
document.execCommand(sCommand [, bUserInterface] [, vValue])
本方法能够对当前文档，当前选区或给定的范围执行一个命令。如果命令被成功执行则会返回ture。
示例：
//创建链接
document.execCommand('CreateLink');
//设置颜色
document.execCommand('ForeColor', 'false', '#f03');
这里列举几个常用的命令：
-
o
- BackColor – 设置或获取当前选中区域的背景颜色
- Bold – 切换当前选中区域是否加粗
- Copy – 将当前选中区域复制到粘贴板
- CreateBookmark – 创建一个书签锚点或获取当前选中区域或插入点的书签锚点的名称
- CreateLink – 在当前选中区域插入超链接，或显示一个对话框允许用户指定为当前选中区域插入的超链接的url
- Cut – 将当前选中区域复制到剪切板并删除
- Delete – 删除当前选中区域
- FontName – 设置或获取当前选中区域的字体
- FontSize – 设置或获取当前选中区域的字体大小
- ForeColor – 设置获取当前选中区域的前景（文本）颜色
- FormatBlock – 设置当前块格式化标签
- Indent – 增加选中文本的缩进
- InsertButton – 用按钮控件覆盖当前选中区
- InsertImage – 用图像覆盖当前选中区
- InsertOderedList – 切换当前选中区域是编号列表还是常规格式化块
- InsertParagraph – 用换行覆盖当前选中区
- InsertUnorderedList – 切换当前选中区域是符号列表还是常规格式化块。
- Italic – 切换当前选中区域斜体显示与否
- JustifyCenter – 将当前选中区所在格式化块居中
- JustifyFull – 将当前选中区所在格式化块全对齐
- JustifyLeft – 将当前选中区所在格式化块居左
- JustifyNone – 取消设置
- JustifyRight – 将当前选中区所在格式化块居右
- Paste – 将剪贴板中的内容覆盖当前选中区
- Redo – 重做
- RemoveFormat – 从当前选中区删除格式化标签
- StrikeThrough – 切换当前选中区删除线显示与否
- UnBookmark – 从当前选中区中删除全部标签
- Underline – 切换当前选中区下划线显示与否
- Undo – 撤销
- Unlink- 从当前选中区中删除全部超链接
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
3.选区（Selection）和范围（Range）
选区和范围也是非常重要的一个基础内容。
选区（Selection）代表当前激活的选中区域，即用户在页面上拖拽时选中的文本或其他元素。当然它不仅仅可以由用户操作生成，同样也可以有脚本控制生成。
IE中有两种范围（Range）分别是TextRange和controlRange集合。TextRange表示HTML元素中的文本。controlRange集合表示一组元素的集合。
FireFox和webkit中的Selection和Range与IE中的差别比较大。只有一个Range对象，代表了文档的一个片段，它可以包含给定文档节点和文本节点的一部分。当然这几个浏览器之间这几个对象的属性和方法之间差距还是很大的。所以这里需要对着几个对象进行一些封装，以便于使用以及代码的格式化整理。本部分内容在后面用到的时候还再进行讨论。
本篇文章主要讨论了实现一个富文本编辑器用到的基础知识，虽然不多，但是相对来说第三点内容还是比较复杂的。在下一篇文章中会开始讨论具体一点的实现过程。
转载请注明原文出处《富文本编辑器实现（一）》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
动手做一个在线富文本编辑器
只用亲自动手做一下才知道做一个富文本编辑器是多么的复杂。这个版本只是实现了最基本的功能。
先看一下截图：
网上这方面的资料已经很多了，这里就不再一一赘述，主要的谈一下在实现过程中碰到的问题以及几个关键点。
首先这个界面让我吃尽苦头，由于样式的原因，每个按钮的样式要单独定制，视觉设计与前端的实现看来一定要考虑清楚，不然在实现的时候可能带来很多不必要的麻烦。
由于execCommand并不标准所以在MSIE和FireFox下面实现也不尽相同，包括换行，加粗，斜体，字体，字号，背景色……等等。基本上是两套实现。
在IE下设置字体和字号的时候生成的都是font标签，让人很是郁闷。
iframe不支持dom1支持的onclick等事件注册方式，所以必须要实用dom2的事件注册方式。
selection和range对于在IE和W3C支持差别是非常大的，而要解决大部分的麻烦必须要使用这两个对象，目前还在进一步的摸索中。
具体的实现和源代码会在进一步完善后放出。
转载请注明原文出处《动手做一个在线富文本编辑器》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。