Vue wangEditor增加自定义字号

一.前言

用wangEditor还没休闲两天，新的需求来了（全沾工程师是这样的），需要在原来的基础上新增多几个字号，但是wangEditor官网明确写着菜单配置的字号数量只能减少不能增加，看来只能自己动手丰衣足食了。

二.思路

试了挺多方法的，有一次复制到网页一些样式并且在后面继续打字也能继续保持这种样式，那就是说我们只要能把字体变成这样的字号然后在后面继续打字就ok了？动手试试先

查阅官网文档中的有提供扩展的下拉菜单DropList 菜单
再从wangEditor的富文本基础API中寻找合适的操作命令

先在components下创建一个ykEditor.vue

<template>
  <div class="yk-wangEditor">
    <div id="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from "wangeditor"

export default {
  name: "editor",

  data() {
    return {
      editor: "",

    }
  },

  props: {
    params: Object,
    keys: String,
  },


  mounted() {
    this.editor = new E("#editor");

    this.editor.create();
  },


  methods: {

  },
}
</script>

<style scoped>

.yk-wangEditor .text {
  border: 1px solid #ccc;
  height: 400px;
}

</style>

照猫画老虎对DropList菜单进行扩展，在lib下创建一个insertFontSize.js

//新增“额外字号”菜单
import E from "wangeditor"

const {$, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip} = E

export default class insertFontSize extends DropListMenu {
  constructor(editor) {
    const $elem = $('<div class="w-e-menu" data-title="额外字号"><i class="el-icon-edit-outline"></i></div>')
    // droplist 配置
    const dropListConf = {
      width: 100,
      title: '设置额外字号',
      type: 'list',
      list: [
        {
          $elem: $(`<i class="w-e-drop-list-item" style="font-size:20px;font-style: normal;">20px</i>`),
          value: '20px'
        },
        {
          $elem: $(`<i class="w-e-drop-list-item" style="font-size:22px;font-style: normal;">22px</i>`),
          value: '22px'
        },
        {
          $elem: $(`<i class="w-e-drop-list-item" style="font-size:26px;font-style: normal;">26px</i>`),
          value: '26px'
        },
        {
          $elem: $(`<i class="w-e-drop-list-item" style="font-size:28px;font-style: normal;">28px</i>`),
          value: '28px'
        },
      ],
      // 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 = `<span style='font-size:${value}'>${selectedText}</span>`
    
    // 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()
    }
  }
}

3.引入使用

<template>
  <div class="yk-wangEditor">
    <div id="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from "wangeditor"

import insertFontSize from "@/lib/insertFontSize"

export default {
  name: "editor",

  data() {
    return {
      editor: "",
    }
  },

  props: {
    params: Object,
    keys: String,
  },

  mounted() {
    this.editor = new E("#editor");
    
    this.editor.menus.extend("insertFontSize", insertFontSize);
    //重新配置 editor.config.menus
    this.editor.config.menus = this.editor.config.menus.concat("insertFontSize");

    this.editor.create();
  },
  
  methods: {

  },
}
</script>

<style scoped>

.yk-wangEditor .text {
  border: 1px solid #ccc;
  height: 400px;
}

</style>

效果展示
小结从结果来说是实现了这么一个功能，但是操作的话和整个富文本编辑器格格不入，需要先选中文字调整字号后续才能继续用这个字号。而且如果是先对字体做了其他样式再调额外的字号的话，样式会丢失，所以只能是先调额外字号再做样式，有挺多不合理的地方，如果有好的方法欢迎指教。

三.扩展思路

看到一位老哥写的文章wangEditor增加行高和具体字号功能要改源码，但是王大也是说过这个问题，不要动不动就改源码，改源码之后维护升级咋办。老大难题了。