富文本编辑中一个非常关键的document属性execCommand(command,boole,val);这个属性可以得到并且编辑我们当前选则文档节点内容。
我们上一节讲过createRange和createTextRange,都是针对文档去创建并保存一个range选区,一般不会用来去做富文本编辑这种需求,而只是单纯的去做单个或者几个选取插入以及对光标处理效果;
不过后者可以利用document.selection.createTextRange().execCommand(a,b,c)去实现对选区编辑样式等。但是前者也就是w3c中并没有execCommand;所以实现起来就比较费劲
如果非得要用这两个去实现富文本也未必不可,因为两个方法中都有对选区的操作方法(我们可以对选区内容进行剪切后再编辑再复制原处)例如插入节点文本以及环绕选区等。
不过这种方式处理的就不能是单纯的像input框或者textArea这种文本输入节点了,因为所有设置都不会在里面显示,不过我们还是可以简单的针对其他p等标签进行删除插入样式等更为精细类似操作;此处不再赘述。
execCommand这个属性是针对选区进行操作的,例如:加粗、下划线、插入等。
不过由于w3c标准浏览器里面根本就没有execCommand这个属性,所以实现起来就没这个这么轻松易懂了。一般的富文本实现方法都会将编辑器放置于iframe中然后得到iframe的document对象,
最后利用该对象去得到execCommang属性从而达到我们富文本编辑效果。
具体应用介绍如下(来自互联网):
参数说明
command
类型:String
功能:要执行的命令的名称
boole
类型:boolean
功能:是否向用户显示命令特定的对话框或消息框。
val
类型:string
功能:要使用该命令分配的值。并非适用于所有命令。