wangeditor自定义菜单

时间是衡量事业的标准。 —— 培根

代码如下：

import { DomEditor, IButtonMenu, IDomEditor, ISelectMenu } from '@wangeditor/editor'

export class MentionMenu implements IButtonMenu {
  constructor() {
    this.title = '设置标签'
    // this.iconSvg = '<svg >...</svg>'
    this.tag = 'button'
  }

  title: string
  iconSvg?: string | undefined
  hotkey?: string | undefined
  alwaysEnable?: boolean | undefined
  tag: string
  width?: number | undefined

  getValue(editor: IDomEditor) {
    return editor.getSelectionText()
  }

  isActive(editor: IDomEditor) {
    return false // or true
  }

  isDisabled(editor: IDomEditor) {
    return !editor.getSelectionText() // or true
  }

  exec(editor: IDomEditor, value: string | boolean) {
    // if (typeof value === 'string') editor.insertText(value)
    triggerModal(editor, undefined, editor.getSelectionText())
  }
}

配置：

/**
 * @description mention module entry
 * @author wangfupeng
 */

import { IModuleConf } from '@wangeditor/editor'
import { AutoSelectMenu, MentionMenu, withMention } from './plugin'
import renderElemConf from './render-elem'
import elemToHtmlConf from './elem-to-html'
import parseHtmlConf from './parse-elem-html'

const module: Partial<IModuleConf> = {
  editorPlugin: withMention,
  renderElems: [renderElemConf],
  elemsToHtml: [elemToHtmlConf],
  parseElemsHtml: [parseHtmlConf],
  menus: [
    {
      key: 'mention-set',
      factory() {
        return new MentionMenu()
      },
    }
  ],
}

export default module

如果我们还需要配置到hoverbar

editor.getConfig().hoverbarKeys['text'].menuKeys.unshift('mention-set')
    insertKeys = {
      index: 0,
      keys: ['mention-set', 'auto-select'],
}