快速扩展一个菜单

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

准备

  1. // 引入 wangEditor
  2. import E from 'wangeditor' // npm 安装
  3. // const E = window.wangEditor // CDN 引入的方式
  5. // 获取必要的变量，这些在下文中都会用到
  6. const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
  8. // 【注意】如果版本 <= v4.0.5 需要这样写：
  9. // const { $ } = E
  10. // const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E.menuConstructors

菜单 class

  1. // 第一，菜单 class ，Button 菜单继承 BtnMenu class
  2. class AlertMenu extends BtnMenu {
  3.     constructor(editor) {
  4.       // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
  5.         const $elem = E.$(
  6.             `<div class="w-e-menu" data-title="Alert">
  7.                 <button>alert</button>
  8.             </div>`
  9.         )
  10.         super($elem, editor)
  11.     }
  12.     // 菜单点击事件
  13.     clickHandler() {
  14.         // 做任何你想做的事情
  15.         // 可参考【常用 API】文档，来操作编辑器
  17.         alert('hello world')
  18.     }
  19.     // 菜单是否被激活（如果不需要，这个函数可以空着）
  20.     // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
  21.     // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
  22.     tryChangeActive() {
  23.         // 激活菜单
  24.         // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
  25.         // 2. this.this.isActive === true
  26.         this.active()
  28.         // // 取消激活菜单
  29.         // // 1. 菜单 DOM 节点会删掉 .w-e-active
  30.         // // 2. this.this.isActive === false
  31.         // this.unActive()
  32.     }
  33. }

快速扩展一个菜单 - 图1

注册菜单

【注意】 推荐使用全局模式来注册菜单。如果有多个编辑器，每个编辑器的自定义菜单不一样，则使用实例的方式来注册菜单

全局模式

  1. // 菜单 key ，各个菜单不能重复
  2. const menuKey = 'alertMenuKey' 
  4. // 注册菜单
  5. E.registerMenu(menuKey, AlertMenu)
  7. const editor = new E('#div1')
  8. editor.create()
  10. const editor2 = new E('#div2')
  11. editor2.create()

实例模式

  1. // 菜单 key ，各个菜单不能重复
  2. const menuKey = 'alertMenuKey' 
  3. const menuKey2 = 'alertMenuKey2'
  5. const editor = new E('#div1')
  6. // 注册菜单
  7. editor.menus.extend(menuKey, AlertMenu)
  9. // 将菜单加入到 editor.config.menus 中    const menuKey = 'alertMenuKey' 
  10. // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档    editor.config.menus.push(menuKey)
  11. editor.config.menus = editor.config.menus.concat(menuKey)
  13. // 注册完菜单，再创建编辑器，顺序很重要！！
  14. editor.create()
  16. const editor2 = new E('#div2')
  17. editor2.menus.extend(menuKey2, AlertMenu)
  18. editor2.config.menus.push(menuKey2)
  19. editor2.create()

快速扩展一个菜单 - 图2

ts 中获取 type

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

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

  1. import { DropListConf, DropListItem, PanelTabConf, PanelConf, TooltipConfItemType } from 'wangeditor'