有关wangEditor3的使用历程[首行缩进，替换字体图标以及设置行高]

最近项目中用到了wangEditor作为富文本编辑器，他的工具中没有常用的首行缩进和设置行高的功能，在这里记录下自己在源码中添加这两个功能的历程：

行高菜单的添加：

在src/js/menus目录下按照原来的格式添加lineHeight文件夹，在下面添加index.js文件，在menu-list.js中加入lineHeight模块，内容如下：

// 构造函数
function LineHeight(editor) {
    this.editor = editor
    this.$elem = $('<div class="w-e-menu"><i class="icons-lineheight"></i></div>')
    this.type = 'droplist'

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

    // 初始化 droplist
    this.droplist = new DropList(this, {
        width: 160,
        $title: $('<p>行高</p>'),
        type: 'list', // droplist 以列表形式展示
        list: [
            { $elem: $('<span>1.0倍</span>'), value: '1' },
            { $elem: $('<span>1.5倍</span>'), value: '1.5' },
            { $elem: $('<span>1.8倍</span>'), value: '1.8' },
            { $elem: $('<span>2.0倍</span>'), value: '2' },
            { $elem: $('<span>2.5倍</span>'), value: '2.5' },
            { $elem: $('<span>3倍</span>'), value: '3' }
        ],
        onClick: (value) => {
            // 注意 this 是指向当前的 LineHeight 对象
            this._command(value)
        }
    })
}

// 原型
LineHeight.prototype = {
    constructor: LineHeight,

    // 执行命令
    _command: function (value) {
        const editor = this.editor
        editor.cmd.do('lineHeight', value)
    }
}

export default LineHeight

然后再command文件夹下的index.js文件中添加自定义命令 _lineHeight ，设置点击行高菜单需要将对应的内容设置相应的行高，即可添加对应的菜单功能；

首行缩进菜单的添加：流程跟添加行高类似就不写了...

说一下在这个过程中困惑很久的问题，就是行高跟首行缩进的字体图标显示小方块的问题，字体文件路径以及css文件都没有问题，无论怎么做就是不显示图标，中间还想过在自己的项目中添加字体文件跟样式，在wangEditor中通过类名也是可以解决的，这个办法不是最根本的解决方式，后面灵机一动，想到了他的字体文件的编译，看了下gulpfile.js文件，找到了下面的一段，将字体文件压缩成了base64，把自己的加上去转换成base64就能找到图标了，(*^▽^*),

有更好的解决方式，欢迎留言评论~~~

 

相关:  编辑器，wangEditor，lineHeight，indent，fontIcons