富文本编辑器实现（一）
这里简单的聊一下如何实现一个简单的富文本编辑器。见以前的文章动手做一个在线富文本编辑器。
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协议。