轻松实现富文本编辑器

Demo: https://ma125120.github.io/ma-dom/test/exec.html（仅提供参考，实现了富文本编辑器的基础功能，如有完善需要，可自行拓展或者在下方评论，提出您珍贵的意见）。

前几天项目中需要使用富文本编辑器，看了看github流行的富文本编辑器，体积都偏大，由于公司服务器的带宽有限，所以就只能自己实现一个简易的富文本编辑器了。

该方法的重点就是 document.execCommand 和 html5的contenteditable 全局属性（其实document.designMode也可以达到效果，但是我觉得还是contenteditable比较更好用，你看github上的那些富文本编辑器，基本上都是带有contenteditable属性的div元素制作而成的）。

1. document.execCommand这个方法是针对文档中的被选择文本进行操作，那么哪些元素是可以视为有效的被选择文本呢？
2. 分别是 HTML文档切换到设计模式 designMode或是使用contentEditable属性的元素，input输入框和textarea也是可以的，但是这种文本框使用document.execCommand时会受到许多的限制，毕竟文本框的值只能为字符串，所以很多针对文本的格式化方法是不值得。
3. 当选择文本后，只要调用document.execCommand方法传入相应的参数，即可对文本进行格式化，具体支持的操作可自行前往 mdn 或者上方的链接进行查阅。注意：在火狐浏览器中使用时，第二个参数必须为false,否则该函数会执行失败，切记切记。
4. 还有一点需要注意的是：选择文本后，触发document.execCommand方法执行的绑定元素最好是button或者img元素，最后不要使用其他元素如div，因为在div等元素上点击时，文档中的被选择区域就会变成你点击的元素本身，也就是发生了选区丢失的问题。虽然可以通过在元素上使用 user-select: none;属性来避免选区丢失的问题，但是这种方法存在浏览器兼容性问题，比如搜狗浏览器就不支持。

在该Demo中使用事件监听的方式，对具有exec类的元素进行了监听，当点击该元素时，就会使用该元素的data-exec和data-exec2属性的值作为document.execCommand方法的第一个参数和第三个参数，从而实现对文本的格式化。
需要在项目中实际应用的话，也特别简单，只需要使用我的 那个 事件监听函数，然后在文档中添加一个具有contenteditable属性的div元素，具有data-exec属性和exec类的button即可。

github地址： https://github.com/ma125120/ma-dom/tree/master/test。