快速扩展一个菜单

【注意】以 Button 菜单为例演示,下文会提到其他类型的菜单,注册步骤都是一样的。

准备

// 引入 wangEditor
import E from 'wangeditor' // npm 安装
// const E = window.wangEditor // CDN 引入的方式

// 获取必要的变量,这些在下文中都会用到
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

// 【注意】如果版本 <= v4.0.5 需要这样写:
// const { $ } = E
// const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E.menuConstructors

菜单 class

// 第一,菜单 class ,Button 菜单继承 BtnMenu class
class AlertMenu extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu">
                <button>alert</button>
            </div>`
        )
        super($elem, editor)
    }
    // 菜单点击事件
    clickHandler() {
        // 做任何你想做的事情
        // 可参考【常用 API】文档,来操作编辑器

        alert('hello world')
    }
    // 菜单是否被激活(如果不需要,这个函数可以空着)
    // 1. 激活是什么?光标放在一段加粗、下划线的文本时,菜单栏里的 B 和 U 被激活,如下图
    // 2. 什么时候执行这个函数?每次编辑器区域的选区变化(如鼠标操作、键盘操作等),都会触发各个菜单的 tryChangeActive 函数,重新计算菜单的激活状态
    tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()

        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
    }
}

注册菜单

const editor = new E('#div1')

// 注册菜单
const menuKey = 'alertMenuKey' // 菜单 key ,各个菜单不能重复
editor.menus.extend('alertMenuKey', AlertMenu)

// 将菜单加入到 editor.config.menus 中
// 也可以通过配置 menus 调整菜单的顺序,参考【配置菜单】部分的文档
editor.config.menus = editor.config.menus.concat(menuKey)

// 注册完菜单,再创建编辑器,顺序很重要!!!
editor.create()

ts 中获取 type

再接下来的文档中,参考源码去开发 DropList Panel Tooltip 时,如果你用 ts 开发,可能会用到 wangEditor 内置的一些 type ,可以通过这种方式获取。

注意,wangEditor 版本必须 >= v4.0.6 。

import { DropListConf, DropListItem, PanelTabConf, PanelConf, TooltipConfItemType } from 'wangeditor'
Copyright © wangEditor (2020 - present) all right reserved,powered by GitbookFile Modify: 2020-12-02 02:40:20

results matching ""

    No results matching ""