最近项目中用到了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