wangEditor编辑器使用

项目中用到了wangEditor这个编辑器组件，官网地址：http://www.wangeditor.com，最新版本效果图如下：

，没有字体大小控制和字体样式的功能。只好在此基础上做修改，想达到效果如下：

话不多说，直接上代码：

1）首先是配置信息：

    var config = {
        
        // 字体大小配置
        fontSizes: {h1:1,h2:2,h3:3,h4:4,h5:5,h6:6,h7:7},

        ...

     }

2)字体配置函数及构造函数

/*
    menu - fontsize
    */
//构造函数
   function FontSize(editor) {
       var _this = this;

       this.editor = editor;
       this.$elem = $('<div><i><i/></div>');
       this.type = 'droplist';

       // 当前是否 active 状态
       this._active = false;

       // 初始化 droplist
       this.droplist = new DropList(this, {
           width: 100,
           $title: $('<p>设置字体</p>'),
           type: 'list', // droplist 以列表形式展示
           list: [{ $elem: $('<span>一号字体</span>'), value: '<p>' },
                  { $elem: $('<span>二号字体</span>'), value: '<p>' },
                  { $elem: $('<span>三号字体</span>'), value: '<p>' },
                  { $elem: $('<span>四号字体</span>'), value: '<p>' },
                  { $elem: $('<span>五号字体</span>'), value: '<p>' },
                  { $elem: $('<span>六号字体</span>'), value: '<p>' },
                  { $elem: $('<span>七号字体</span>'), value: '<p>' }],
           onClick: function onClick(value) {
               // 注意 this 是指向当前的 Head 对象cb
               _this._command(value);
           }
       });
   }
 // 原型
    FontSize.prototype = {
        constructor: FontSize,

        // 执行命令
        _command: function _command(value) {
            var editor = this.editor;
            var key = $(value).attr("class");
            var fs = editor.config.fontSizes[key];
            //console.log("key",key+" ;value: "+fs);

            var text = editor.selection.getSelectionText();
            //console.log("selection text : ",text);

            editor.cmd.do('fontSize', fs);
        },

        // 试图改变 active 状态
        tryChangeActive: function tryChangeActive(e) {
            var editor = this.editor;
            var $elem = this.$elem;
            //var reg = /^h/i;
            var cmdValue = editor.cmd.queryCommandValue('fontSize');
            if (cmdValue) {
                this._active = true;
                $elem.addClass('w-e-active');
            } else {
                this._active = false;
                $elem.removeClass('w-e-active');
            }
        }
    }; 

3）存储菜单的构造函数：

MenuConstructors.fontsize = FontSize;