扩展菜单注册太过繁琐

[clinfc]

问题描述

当前扩展菜单是在每个实例中都去注册，但是其实这并没有必要，其实第一个实例注册后，后续的实例只需要设置 editor.config.menus 即可。

既然如此，何不直接在 wangEditor 上提供一个静态接口呢，实例化之前全局注册，后续就没必要这么麻烦了

wangEditor 版本

v4

是否查阅了文档 ？

是

最小成本的复现步骤

当前实现

<div id="div1"></div>
<div id="div2"></div>

<script src="../dist/wangEditor.js"></script>
<script>
    const E = window.wangEditor

    const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

    class InsertABCMenu extends BtnMenu {
        constructor(editor) {
            const $elem = E.$(
                `<div class="w-e-menu">
                    <button>ABC</button>
                </div>`
            )
            super($elem, editor)
        }
        clickHandler() {
            this.editor.cmd.do('insertHTML', 'ABC')
        }
        tryChangeActive() {
            this.active() 
        }
    }
    
    const editor = new E('#div1')
    // 注册菜单
    editor.menus.extend('insertABC', InsertABCMenu)
    // 重新配置 editor.config.menus
    editor.config.menus.push('insertABC')

    editor.create()
    
    const editor2 = new E('#div2')
    // 实例2并未注册菜单一样可以拥有实例1注册的菜单功能
    editor2.config.menus.push('insertABC')
    editor2.create()
</script>

期望实现

<div id="div1"></div>
<div id="div2"></div>

<script src="../dist/wangEditor.js"></script>
<script>
    const E = window.wangEditor

    const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

    class InsertABCMenu extends BtnMenu {
        constructor(editor) {
            const $elem = E.$(
                `<div class="w-e-menu">
                    <button>ABC</button>
                </div>`
            )
            super($elem, editor)
        }
        clickHandler() {
            this.editor.cmd.do('insertHTML', 'ABC')
        }
        tryChangeActive() {
            this.active() 
        }
    }
    
    // 注册菜单
    E.registerMenu('insertABC', InsertABCMenu)
    
    const editor = new E('#div1')
    editor.create()
    
    const editor2 = new E('#div2')
    editor2.create()
</script>