A preface.

WangEditor has not been used for leisure for two days, but new requirements come (for all the engineers), which need to add several new fonts on the basis of the original, but it is clearly written on the wangEditor official website that the number of fonts configured on the menu can only be reduced rather than increased, so it seems that we have to make our own food and clothes.

2. Train of thought

I tried a lot of things, but once I copied some of the styles to the web page and kept typing at the back, so we could just change the font size to this size and keep typing at the back, ok? Try it first

  • Check the official documentation for the DropList menu that provides the extension
  • Then look for the appropriate action commands from wangEditor’s rich text base API
  1. Create ykEditor. Vue under Components
<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>
Copy the code
  1. Expand the DropList menu and create insertFontsie.js under lib
// Add "Extra type" menu
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 - the menu data -" title = "extra font size" > < I class = "el - icon - edit - the outline" > < / I > < / div >')
    / / droplist configuration
    const dropListConf = {
      width: 100.title: 'Set extra font size'.type: 'list'.list: [{$elem: $(`20px`),
          value: '20px'
        },
        {
          $elem: $(`22px`),
          value: '22px'
        },
        {
          $elem: $(`26px`),
          value: '26px'
        },
        {
          $elem: $(`28px`),
          value: '28px'},].// droplist click events for each item
      clickHandler: (value) = > {
        // The value parameter is the value configured in droplistconf. list
        this.command(value)
      },
    }
    super($elem, editor, dropListConf)
  }


  command(value) {
    // Get the selected text
    let selectedText = this.editor.selection.getSelectionText();

    // Concatenate CSS styles
    let newValue = `<span style='font-size:${value}'>${selectedText}</span>`
    
    // insertHTML inserts an HTML string at the insertion point (delete the selected part). You need an HTML string as an argument. (Internet Explorer not supported)
    this.editor.cmd.do('insertHTML', newValue)
  }

  // Menu active status
  tryChangeActive() {
    const reg = /font-size/g

    // Get the content of the DOM node where the current selection is located
    const selectedElementText = this.editor.selection.getSelectionContainerElem().elems[0].outerHTML

    if (reg.test(selectedElementText)) {
      // The selection contains the font size, activation menu
      this.active()
    } else {
      // Otherwise, the activation is deactivated
      this.unActive()
    }
  }
}
Copy the code

3. Introduction and use

<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);
    // reconfigure 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>

Copy the code
  1. Results show

  1. summary

As a result, this function is implemented, but the operation is not compatible with the whole rich text editor, you need to select the text to adjust the size later to continue using the same size. And if you make other styles of the font first and then adjust the extra size, the style will be lost, so you can only adjust the extra size first and then do the style, there are many unreasonable places, if there is a good way to welcome your advice.

Three. Expand your thinking

See an article written by a brother wangEditor to increase the line height and specific font function to change the source code, but Wang Da also said this problem, do not always change the source code, change the source code after maintenance upgrade how to do. The boss has a problem.