Not found menu item factory by key 'uploadAttachment'

[kiki000]

toolbarConfig 配置： insertKeys: { index: 0, // 自定义插入的位置 keys: ['uploadAttachment'], // “上传附件”菜单 },

效果：

[wangfupeng1988]

参考这里 https://github.com/wangfupeng1988/html-wangeditor-demo/blob/main/v5-attachment.html

注意，要先通过 registerModule 注册

[1173688472]

我在vue2中使用,一直报这个错误 editor: null, html: '<p class=\'aaa\'>1111

', toolbarConfig: {

    toolbarKeys: ['attachmentModule'],
    insertKeys: {
      index: 0,
      keys: [ "editCodes"],
    },
    excludeKeys: ['fullScreen', 'downloadAttachment'],
  },
  addKnowledgeDrawer: false,
  editorConfig: {
    placeholder: '',
    MENU_CONF: {
      uploadAttachment: {
        // 用户自定义上传
        customUpload (file, insertFn) {
          console.log('customUpload', insertFn)

          return new Promise(resolve => {
            // 插入一个文件，模拟异步
            setTimeout(() => {
              const src = `http://localhost:3039/#/home`
              insertFn(`${file.name}`, src)
              resolve('ok')
            }, 500)
          })
        },
        // 插入到编辑器后的回调
        // onInsertedAttachment(elem) {
        //   // console.log(elem,'sss')
        // },
        // // 自定义选择
        // customBrowseAndUpload(insertFn) {
        //   alert('自定义选择文件，如弹出图床')
        //   // 自己上传文件
        //   // 上传之后用 insertFn(fileName, link) 插入到编辑器
        // },
        // // 上传成功后，用户自定义插入文件
        customInsert (res, file, insertFn) {
          console.log('customInsert', res)
          const { url } = res.data || {}
          if (!url) throw new Error(`url is empty`)

          // 插入附件到编辑器
          insertFn(`customInsert-${file.name}`, url)
        },
      }
    },
    'text': {
      // 如有 match 函数，则优先根据 match 判断，而忽略 element type
      match: (editor, n) => {   // TS 语法
        console.log(editor, n, 'editor, n')
      },
    },

  },
  gridData: {},
  dialogTableVisible: false,
  classifyInput: '',
  classifyTree: [
    {
      id: '1',
      label: '全部主题',
      value: 45,
      children: [
        {
          id: '1-1',
          label: '生育收养',
          value: ''
        },
        {
          id: '1-2',
          label: '户籍办理',
          value: ''
        },
        {
          id: '1-3',
          label: '民族宗教',
          value: ''
        },
        {
          id: '1-4',
          label: '教育科研',
          value: ''
        },
        {
          id: '1-5',
          label: '入伍服务',
          value: ''
        },
        {
          id: '1-6',
          label: '生育收养',
          value: ''
        },
        {
          id: '1-7',
          label: '户籍办理',
          value: ''
        },
        {
          id: '1-8',
          label: '民族宗教',
          value: ''
        },
        {
          id: '1-9',
          label: '教育科研',
          value: ''
        },
        {
          id: '1-10',
          label: '入伍服务',
          value: ''
        },

      ]
    }
  ],
  qaSearchInput: '',
  qaList: ['中华人民共和国居民身份证管理条例中华人民共和国居民身份证管理条例', '居民身份证申请表'],
  qaTableData: [
    { name: '中华人民共和国居民身份证管理条例' },
    { name: '居民身份证申请表' },
  ],
  selectNum: 45,
  nodeData: {},//点击的节点信息
}

}, methods: { onCreated (editor) { this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错 this.toolbarConfig.toolbarKeys = [...editor.getAllMenuKeys()] if (!editor.getAllMenuKeys()?.includes("editCodes")) { //判断如果已经插入进去，不在二次插入
 const menu1Conf = { key: 'editCodes', // 定义 menu key ：要保证唯一、不重复（重要） factory() { return new MyButtonMenu() }, } Boot.registerMenu('menu1Conf'); } }, handleAaaClick () { // 处理 class 为 'aaa' 的元素点击事件的逻辑 console.log('Element with class aaa Clicked!') }, onChange (editor) { //判断是否点击了需要弹出的节点 this.selectedNode() },

selectedNode () {
  const nodeEntries = SlateEditor.nodes(this.editor, {
    match: (node) => {  // TS syntax
      // match: (node) => {          // JS syntax
      if (SlateElement.isElement(node)) {
        if (node.type === 'attachment') {
          return true // 匹配 paragraph
        }
      }
      return false
    },
    universal: true,
  })
  if (nodeEntries == null) {
    console.log('当前未选中的 paragraph')
  } else {
    for (let nodeEntry of nodeEntries) {
      const [node, path] = nodeEntry
      // 这里可以对 node 进行操作，node是选中的节点
      this.nodeData = JSON.parse(JSON.stringify(node))
      this.dialogTableVisible = true
    }
  }

},
// 插入图片
chaImg (e) {
  const node = {
    type: 'image',
    src: 'https://picx.zhimg.com/80/v2-820813f20afbcbd6a696f4ab3a412dde_200x0.jpg?source=4e949a73',
    // 其他属性 ...
    children: [{ text: '' }] // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
  }
  this.editor.insertNode(node)
  this.addKnowledgeDrawer =false
}

}, mounted () { }, beforeDestroy () { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！ }, }