所谓富文本编辑器(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。