扩展菜单注册太过繁琐
clinfc opened this issue · 0 comments
clinfc commented
问题描述
当前扩展菜单是在每个实例中都去注册,但是其实这并没有必要,其实第一个实例注册后,后续的实例只需要设置 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>