实现简易版富文本编辑器

所谓富文本编辑器（RTE）是指一种可以内嵌于浏览器，所见即所得的文本编辑器，方便用户在线编辑文章或新消息等。由于目前市场上的浏览器种类繁多，对应的RTE还没有一个统一的标准，但对于最基本的功能，各浏览器提供的API基本一致，从而使得编写一个跨浏览器的富文本编辑器成为可能。

基本原理

我们通常是利用div和iframe实现文本编辑功能的，其中，如果要在div中编辑文本，需设置其contentEditable=“true”即可，如果要在iframe中编辑文本，需设置designMode=“on”即可。虽然两种方法均可实现文本编辑，但大都是利用iframe来实现富文本编辑的。

（1）首先，使用iframe可以解决浏览器兼容性问题，可以方便的在不同浏览器中获取选中的文字；

（2）使用iframe编辑文本可以实现所见即所得的效果，相当于显示了浏览器解析源码后的内容；

（3）使用iframe可是实现直接在iframe下的document中进行文字操作（通过iframe.contentWindow.document获取iframe下的document），不会影响到当前文档。

利用iframe开发富文本编辑器时主要用到documen.execCommand(command,show,value)方法，其中

command：表示要执行的命令名称，

show：boolean类型，表示是否向用户显示命令特定的对话框或消息框，

value：string类型，表示要使用该命令分配的值。

本文的简易版富文本编辑器中所用到的执行命令主要包括：

加粗命令：documen.execCommand(bold,false,null)；

斜体命令：documen.execCommand(italic,false,null)；

下划线命令：documen.execCommand(underline,false,null)；

删除线命令：documen.execCommand(StrikeThrough,false,null)；

左对齐命令：documen.execCommand(justifyleft,false,null)；

居中对齐命令：documen.execCommand(justifycenter,false,null)；

右对齐命令：documen.execCommand(justifyright,false,null)；

有序排序对齐命令：documen.execCommand(insertorderedlist,false,null)；

无序排序对齐命令：documen.execCommand(insertunorderedlist,false,null)；

上传图片命令：documen.execCommand(insertImage,false,src)；

添加链接命令：documen.execCommand(createLink,false,href)；

documen.execCommand(command,show,value)方法的执行命令非常繁多，远不止本文提到的一星半点，具体的执行命令可以去google上搜索，这里推荐微软MSDN上的execCommand method，链接地址http://msdn.microsoft.com/en-us/library/ms536419(v=vs.85).aspx。

效果展示