JS实现富文本编辑器

       最近在做一个项目，需要使用富文本编辑器，在网上找了一些源码之后，感觉并不是很理想，所以想自己实现一个富文本编辑器。

       其实要想自己实现一个富文本编辑器也并不是很难，借助 document.execCommand 方法就可以实现。

       关于 document.execCommand 方法，当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法，通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作 (如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进)。当元素被设置了contentEditable，通过执行execCommand 方法可以对当前活动元素进行很多操作。

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值

       Boolean ，如果是 false 则表示操作不被支持或未被启用。

参数

       aCommandName：String ，命令的名称 。

       aShowDefaultUI：Boolean ，是否展示用户界面，一般为 false。Mozilla 没有实现。

       aValueArgument：一些命令需要一些额外的参数值（如insertimage需要提供这个image的url）。默认为null。

       可用命令列表可以参阅：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

       下面数说富文本编辑器具体实现。

       首先，使用H5的特性，可以自定义标签属性

<a class="btn" data-role="fontName" data-value="宋体">宋体</a>

       然后通过document.execCommand命令将相应文本设置为相应样式

$(".editor-option a").click(function(e) {            switch($(this).data("role")) {                case "fontName":                    document.execCommand($(this).data("role"), false, $(this).data("value"));                    break;                case "fontSize":                    document.execCommand($(this).data("role"), false, $(this).data("value"));                    break;                default:                    document.execCommand($(this).data("role"), false, null);                    break;            }        })    });

源码下载：富文本编辑器