Vue wangEditor增加自定义字号

1.前言

昨天下班前我们的一个同事想让我扩展一下我们一个管理后台的富文本工具，增加一些字号和颜色，本想是特别简单的事儿，应该分分钟搞定，但是在扩展完字体颜色之后在扩展字号上卡住了，网友的说法是只支持7种字号，但即使是修改这7种字号的大小，找了各种办法都没能生效。在今天上午经过我的各方努力，终于扩展成功。 先看一下扩展前后的效果。

2.实现过程

在修改fontSize菜单无效以后，决定尝试扩展菜单。

//新增“额外字号”菜单 
import E from "wangeditor" const {
$, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip
} 
= E export default class insertFontSize extends DropListMenu {
constructor(editor) 
{ const $elem = $('') 
// droplist 配置 
const dropListConf = {
width: 100, title: '设置额外字号', type: 'list', list: [ { 
$elem: $(`12px`), value: '12px' },
{ $elem: $(`13px`), value: '13px'}, 
{ $elem: $(`15px`), value: '15px'},
{ $elem: $(`16px`), value: '16x'}, 
{ $elem: $(`18px`), value: '18px'}, 
{ $elem: $(`20px`), value: '20px'}, 
{ $elem: $(`22px`), value: '22px'}, 
{ $elem: $(`24px`), value: '24px'}, 
{ $elem: $(`26px`), value: '26px'}, 
{ $elem: $(`28px`), value: '28px'}, 
{ $elem: $(`32px`), value: '32px' }, ], 
// droplist 每个 item 的点击事件 clickHandler: (value) => { 
// value 参数即 dropListConf.list 中配置的 value this.command(value) }, } 
super($elem, editor, dropListConf) } 
command(value) { 
//获取到选中的文本 let selectedText = this.editor.selection.getSelectionText(); 
//拼接css样式 let newValue = `${selectedText}` 
// insertHTML在插入点插入一个HTML字符串（删除选中的部分）。需要一个个HTML字符串作为参数。
(IE浏览器不支持) this.editor.cmd.do('insertHTML', newValue) } 
// 菜单激活状态 tryChangeActive() { const reg = /font-size/g 
//获取当前选区所在的 DOM 节点内容 const selectedElementText = this.editor.selection.getSelectionContainerElem().elems[0].outerHTML if (reg.test(selectedElementText)) { 
// 选区包含有font-size，激活菜单 this.active() } else { // 否则，取消激活 this.unActive() } } }