实现简易版富文本编辑器

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

效果展示

posted @ 2013-10-27 22:18  twobin  阅读(1897)  评论(2编辑  收藏  举报