feat: 扩展菜单注册太过繁琐 #2493

examples/customMenu.html

@@ -5,6 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wangEditor example</title>
+
  <style>
  </style>
 </head>
@@ -14,20 +15,13 @@
  wangEditor 自定义菜单
  </p>
  <div id="div1"></div>
-
+ <div id="div2"></div>
+ <script src="./babel.min.js"></script>
  <script src="../dist/wangEditor.js"></script>
- <script>
+ <script type="text/babel">
  const E = window.wangEditor
- const editor = new E('#div1')
 
  const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
- // console.log('BtnMenu', BtnMenu)
- // console.log('DropListMenu', DropListMenu)
- // console.log('PanelMenu', PanelMenu)
- // console.log('DropList', DropList)
- // console.log('Panel', Panel)
- // console.log('Tooltip', Tooltip)
-
  // 创建 class
  class InsertABCMenu extends BtnMenu {
  constructor(editor) {
@@ -40,22 +34,23 @@
  }
  // 菜单点击事件
  clickHandler() {
- editor.cmd.do('insertHTML', 'ABC')
+ this.editor.cmd.do('insertHTML', 'ABC')
  }
  // 菜单激活状态
  tryChangeActive() {
  this.active() // 菜单激活
  // this.unActive() // 菜单不激活
  }
  }
-
  // 注册菜单
- editor.menus.extend('insertABC', InsertABCMenu)
-
- // 重新配置 editor.config.menus
- editor.config.menus = editor.config.menus.concat('insertABC')
+ E.registerMenu('insertABC', InsertABCMenu)
 
+ //创建编辑器1
+ const editor = new E('#div1')
  editor.create()
+ //创建编辑器2
+ const editor2 = new E('#div2')
+ editor2.create()
  </script>
 </body>
 

src/editor/command.ts

@@ -72,7 +72,13 @@ class Command {
  } else if (range.insertNode) {
  // IE
  range.deleteContents()
- range.insertNode($(html).elems[0])
+ if($(html).elems.length > 0){
+ range.insertNode($(html).elems[0])
+ }else{
+ let newNode = document.createElement("p");
+ newNode.appendChild(document.createTextNode(html));
+ range.insertNode(newNode);
+ }
  editor.selection.collapseRange()
  }
  // else if (range.pasteHTML) {

src/editor/index.ts

@@ -22,6 +22,7 @@ import History from './history/index'
 import disableInit from './disable'
 
 // 创建菜单的 class
+import { MenuListType } from '../menus/menu-list'
 import BtnMenu from '../menus/menu-constructors/BtnMenu'
 import DropList from '../menus/menu-constructors/DropList'
 import DropListMenu from '../menus/menu-constructors/DropListMenu'
@@ -41,6 +42,7 @@ class Editor {
  static Panel = Panel
  static PanelMenu = PanelMenu
  static Tooltip = Tooltip
+ static constructorList:MenuListType = {}
 
  public id: string
  public toolbarSelector: DomElementSelector
@@ -205,6 +207,17 @@ class Editor {
  public scrollToHead(id: string): void {
  scrollToHead(this, id)
  }
+
+ /**
+ * 自定义添加菜单
+ * @param key 菜单 key
+ * @param Menu 菜单构造函数
+ */
+ static registerMenu(key: string, Menu: any) {
+ if (!Menu || typeof Menu !== 'function') return
+ Editor.constructorList[key] = Menu
+ }
+
 }
 
 export default Editor

src/menus/index.ts

@@ -51,6 +51,17 @@ class Menus {
  m.key = menuKey
  this.menuList.push(m)
  })
+
+ //全局注册
+ for (let [menuKey, menuFun] of Object.entries(Editor.constructorList)) {
+ const MenuConstructor = menuFun // 暂用 any ，后面再替换
+ // 创建 menu 实例，并放到 menuList 中
+ const m = new MenuConstructor(this.editor)
+ m.key = menuKey
+ this.menuList.push(m)
+ }
+
+
 
  // 渲染 DOM
  this._addToToolbar()

test/unit/menus/custom-menu.test.ts

@@ -39,10 +39,10 @@ test('扩展一个菜单', () => {
  tryChangeActive() {}
  }
 
- // 创建编辑器实例
- editor = createEditor(document, 'div1') // 赋值给全局变量，便于再扩展测试用例
  // 注册菜单
- editor.menus.extend('insertABC', InsertABCMenu)
+ Editor.registerMenu('insertABC', InsertABCMenu)
+ // 创建编辑器实例
+ editor = createEditor(document, 'div1')
 
  expect(editor.menus.constructorList.insertABC).not.toBeNull()
 })