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() } } }