Help：如何在原有上传图片组中新增一个上传选项

[zcodecn]

目前的上传图片有[网络图片和上传图片]我想在增加一个选项，应该怎么做呢，看了文档好像只有完整扩展的，没找到在原有基础上增加的范例。

wangEditor 版本 "@wangeditor-next/editor": "^5.5.1", "@wangeditor-next/editor-for-vue": "^5.1.14",

[wjw020206]

目前暂时无法在原有的上传图片组中新增一个上传选项，但是可以通过 toolbarKeys 重写 group-image 来增加上传选项

const toolbarConfig = {
  /** 重写工具栏 */
  toolbarKeys: [
    'undo',
    'redo',
    'formatPainter',
    'clearStyle',
    'fontFamily',
    'fontSize',
    'bold',
    'italic',
    'underline',
    'through',
    'color',
    'bgColor',
    'numberedList',
    'bulletedList',
    'todo',
    'indent',
    'delIndent',
    // 等等...还有更多菜单的key
    {
      key: 'group-image',
      iconSvg: `<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path</svg>`,
      menuKeys: ['insertImage', 'uploadImage', 'customKey'], // customKey 就是你想添加自定义菜单的 key
    }
  ],
};

我还是比较推荐重写工具栏，因为这样菜单项的顺序可以随意调整，以及隐藏不想要的菜单项

[zcodecn]

我的代码中将wangEditor封装成自定义的RichTextEditor组件（VUE3），并在图片中增加【图库选择】项，当点击此项时需要根据RichTextEditor中的不同实例配置做不同的处理。如大神指导我重新定义了菜单栏项目，并定义了一个LibrarySelectButton的IButtonMenu类用于实现图库选择功能 ，然后使用Boot.registerMenu(imageLibrary)注册实例到editor中，但这个方法好像是全局注册， 要根据不同的实例做不同的处理好像有点不友好。我目前的作法是扩展IDomEditor类型，增加一个属性otherAction，并在editor 创建的时候绑定相应的操作editor.otherAction=()=>{..根据组件配置做不同的处理..}， 然后在【图库选择】的实现类LibrarySelectButton.exec（editor,value)再取出来做相应的操作，有点曲线求国。烦劳大神指点有没有其它更好的方式。

[wjw020206]

我的代码中将wangEditor封装成自定义的RichTextEditor组件（VUE3），并在图片中增加【图库选择】项，当点击此项时需要根据RichTextEditor中的不同实例配置做不同的处理。如大神指导我重新定义了菜单栏项目，并定义了一个LibrarySelectButton的IButtonMenu类用于实现图库选择功能 ，然后使用Boot.registerMenu(imageLibrary)注册实例到editor中，但这个方法好像是全局注册， 要根据不同的实例做不同的处理好像有点不友好。我目前的作法是扩展IDomEditor类型，增加一个属性otherAction，并在editor 创建的时候绑定相应的操作editor.otherAction=()=>{..根据组件配置做不同的处理..}， 然后在【图库选择】的实现类LibrarySelectButton.exec（editor,value)再取出来做相应的操作，有点曲线求国。烦劳大神指点有没有其它更好的方式。

我有点不明白你的意思，你是想让不同实例之前点击【图库选择】项执行的操作不一样吗？

[zcodecn]

我的代码中将wangEditor封装成自定义的RichTextEditor组件（VUE3），并在图片中增加【图库选择】项，当点击此项时需要根据RichTextEditor中的不同实例配置做不同的处理。如大神指导我重新定义了菜单栏项目，并定义了一个LibrarySelectButton的IButtonMenu类用于实现图库选择功能 ，然后使用Boot.registerMenu(imageLibrary)注册实例到editor中，但这个方法好像是全局注册， 要根据不同的实例做不同的处理好像有点不友好。我目前的作法是扩展IDomEditor类型，增加一个属性otherAction，并在editor 创建的时候绑定相应的操作editor.otherAction=()=>{..根据组件配置做不同的处理..}， 然后在【图库选择】的实现类LibrarySelectButton.exec（editor,value)再取出来做相应的操作，有点曲线求国。烦劳大神指点有没有其它更好的方式。

我有点不明白你的意思，你是想让不同实例之前点击【图库选择】项执行的操作不一样吗？

是的，点击【图库选项】执行的操作是根据当前实例所在父组件实例配置的参数决定的

[wjw020206]

我的代码中将wangEditor封装成自定义的RichTextEditor组件（VUE3），并在图片中增加【图库选择】项，当点击此项时需要根据RichTextEditor中的不同实例配置做不同的处理。如大神指导我重新定义了菜单栏项目，并定义了一个LibrarySelectButton的IButtonMenu类用于实现图库选择功能 ，然后使用Boot.registerMenu(imageLibrary)注册实例到editor中，但这个方法好像是全局注册， 要根据不同的实例做不同的处理好像有点不友好。我目前的作法是扩展IDomEditor类型，增加一个属性otherAction，并在editor 创建的时候绑定相应的操作editor.otherAction=()=>{..根据组件配置做不同的处理..}， 然后在【图库选择】的实现类LibrarySelectButton.exec（editor,value)再取出来做相应的操作，有点曲线求国。烦劳大神指点有没有其它更好的方式。

我有点不明白你的意思，你是想让不同实例之前点击【图库选择】项执行的操作不一样吗？

是的，点击【图库选项】执行的操作是根据当前实例所在父组件实例配置的参数决定的

方便提供一下你这个自定义的RichTextEditor组件的代码吗？

[cycleccc]

现在的实现方式是创建销毁才能更新 config，有实时更新 config 需求再创建 issue 记录吧