ts富文本自己添加自定义按钮

2023-03-08  本文已影响0人  43e1f527c136

引入wangedirtor

import E from 'wangeditor'

引入$和BtnMenu

const { $, BtnMenu } = E

创建btn类

  class AlertMenu extends BtnMenu {

    constructor(editor: E) {

      // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述

      const $elem = E.$(

        `<div class="w-e-menu" data-title="Alert">

                <button>alert</button>

            </div>`

      )

      super($elem, editor)

    }

    // 菜单点击事件

    clickHandler() {

    }

    tryChangeActive = () => {

    }

  }

//写入key

 const menuKey = 'alertMenuKey'

//注册菜单,

  data.editor.menus.extend(menuKey, AlertMenu)

//最后添加到自己之前写的menus中

 data.editor.config.menus.push(menuKey)

上一篇 下一篇

猜你喜欢

热点阅读