Wangeditor自定义格式刷功能

vue中使用wangeditor5，需要新增格式刷，网上查了很多资料再结合官网，终于搞定了，哈

下面两块代码是新建一个js文件；

import { createEditor, SlateTransforms } from '@wangeditor/editor';

export default class FormatPaint {
  constructor() {
    this.title = '格式刷' // 定义菜单栏标题
   // this.iconSvg = '<svg></svg>'//自定义菜单中格式化刷的图标代码太长就不展示了
    // 这个图标自己去iconFont网站去搜索格式刷然后下载svg图标，使用svg中的代码粘贴到这里即可
    this.tag = 'button'
    if (!FormatPaint.prototype.init) {
      FormatPaint.prototype.attrs = {
        isSelect: false,
        formatJson: {},
        formatedHtml: '',
        marks:{}
      };
      FormatPaint.prototype.init = true;
    }
  }
  getValue(editor) {                           // JS 语法
    return ''
  }

  // 菜单是否需要激活（比如选择加粗文本，“加粗”菜单会被激活），用不到会返回 false
  isActive(editor) {
    console.log(this.attrs.isSelect);

    return this.attrs.isSelect;
  }

  // 菜单是否需要禁用（比如选中 H1 ，“引用”菜单被禁用），用不到会返回 false
  isDisabled(editor) {                     // JS 语法
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    if (this.isDisabled(editor)) return

    const select = editor.getFragment()[0].children[0];
    // console.log(editor.getFragment(),select);
    if (!this.attrs.isSelect && select.text.length) {
      this.attrs.formatJson = { ...select };
      this.attrs.marks = editor.getFragment()[0]
      this.attrs.isSelect = true;
      this.addmouseStyle(editor)
    } else {
      editor.getSelectionText()
      this.attrs.isSelect = false;
       document.body.style.cursor = 'auto'   //恢复鼠标状态
    }
    editor.blur()
    editor.focus()                       // JS 语法
  }
  //设置格式化好的内容
  setFormatHtml(editor) {
    // console.log(this.attrs.formatedHtml);
    if (!this.attrs.formatedHtml.length) return;

    editor.dangerouslyInsertHtml(this.attrs.formatedHtml)
  this.attrs.formatedHtml = ''
  }
//修改点击格式刷后的鼠标样式
  addmouseStyle(editor) {
  console.log(editor.id);
  
    //const icon = `<svg ></svg>`
    const base64String = btoa(icon)
    const dataUrl = `data:image/svg+xml;base64,${base64String}`
    document.body.style.cursor = `url(${dataUrl}),auto`
    // document.querySelector('#w-e-textarea-1').style.cursor = `url('${dataUrl}'),auto`
  }
}

export function withSelect(editor) {
 
  const myFormatPaint = new FormatPaint;

  const { onChange } = editor // 获取当前 editor API
  let newEditor = editor


  newEditor.onChange = (editor) => {
    onChange();
    
    if (myFormatPaint.attrs.isSelect) {
      // debugger
      myFormatPaint.attrs.formatJson.text = newEditor.getSelectionText()
      const _editor = createEditor({
        content: [myFormatPaint.attrs.formatJson]
      })

      myFormatPaint.attrs.formatedHtml = _editor.getHtml();
     
      if (!document.onmouseup) {
        document.onmouseup = () => {
          if (!myFormatPaint.attrs.formatedHtml.length) return;
          myFormatPaint.setFormatHtml(newEditor)
          // 设置节点
          const obj = myFormatPaint.attrs.marks  //获取节点属性
          const {children,...newObj} = obj
          // console.log(obj,newObj,'--------------');
           //居中等行内样式粘贴功能
          SlateTransforms.setNodes(newEditor, { ...newObj }, { mode: 'highest' })
          document.onmouseup = null
        }
      }
    }
    return;
  }
  return newEditor
}

引入及使用的方式：

import FormatPaint,{withSelect} from '@/utils/editorGeshi.js'
import {Boot} from '@wangeditor/editor'


const timestamp = Date.now()
const randomNum = Math.floor(Math.random() * 1000000)
let geshiKey = `${timestamp}-${randomNum}`
const conf = {
    key:geshiKey,
    factory(){
      return new FormatPaint()
    }
}

Boot.registerMenu(conf)
Boot.registerPlugin(withSelect)


//使用wangediotr的inserKeys插入
this.toolConfig.insertKeys = {
    index:12,
    keys:[geshiKey]
}