edui 富文本编辑_实现一个简易的富文本编辑器(一)

富文本编辑器又称为WYSIWYG(所见即所得)，其本质就是在一个页面元素中嵌入HTML代码，并且这个元素可以像文档输入框一样进行文本的编辑，它同时还可以设置文本样式。写博客的工具就是一个功能丰富的富文本编辑器，编辑邮件以及论坛发贴都用到富文本编辑器。

启动富文本编辑：设置contenteditable

让元素的内嵌HTML可以编辑，有三种实现方法：

1.在HTML标签里写入contenteditable即可。

2.在脚本中设置对应元素的contentEditable值为true。这个属性有三种取值，false/true/inherit分别对应“关闭”/“开启”/“继承”。

document.getElementById("editor").contentEditable = true;

3.对于内嵌框架可以设置designMode="on"，不过这种方式兼容性不太好。

富文本编辑器样式命令：document.execCommand()

其实元素设置contentedable后就已经实现了一个最基本的富文本编辑器，只是这个编辑器和文本输入框一样，实在简陋。如果它能很便捷的设置内容的样式，那就完美了。

与富文本样式交互的方法是document.execCommand()。execCommand函数传递三个参数，第一个参数为命令，第二个参数表示是否需要提示用户提供给该命令一个值，第三个参数表示执行当前命令的参数值。有些浏览器设置第二个参数为true会报错，所以为了便于移植，通常我们设置为false。

比如要给选中文本字