关于富文本编辑器

Posted by VickyWu on June 3, 2017

原理:

1.嵌入一个iframe 2.对iframe中的body设置designMode=’on’或contentEditable=’on’ 3.对操作的click事件设置document.execCommand(命令名[,交互方式,动态参数])方法

可视化编辑

可以使用contentEditable或designMode ###designMode 只能将document整体设为编辑模式 ###contentEditable 可讲任何HTML元素转为可编辑状态

IE兼容问题

1.在IE使用designMode,调用document.domain时报错(没有权限) 解决(使用contentEditable) 2.在IE使用designMode,右键菜单没有粘贴复制功能 解决(使用contentEditable) 3.IE6/IE7使用contentEditable,编辑区会自动获取焦点

execCommand

execCommand()是执行一个对当前文档,当前选择或者给出范围的命令。处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]),其中:sCommand为指令参数,交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可用值或属性值

好用的富文本编辑器

kindEditor ckeditor