UEeditor vue-ueditor-wrap关于自定义按钮 和在当前焦点插入内容踩坑

踩坑

vue-ueditor-wrap 这个封装了 UEeditor富文本 ，在@ready 会返回 富文本实例

  <vue-ueditor-wrap @ready="ready" ref="vueUeditor" :config="myConfig" v-model="content"  @beforeInit="addCustomButtom"/>


  ready (editorInstance) {
      this.editorInstance=editorInstance
    },

只有在ready 把当前富文本实例赋值给当前data变量，自定义素材库的时候，才能把图片和文本插入到当前焦点位置

自定义按钮

在beforeInit事件的时候 加入自定义按钮 上代码

 addCustomButtom (editorId) {
      var that = this
      // test-button 这个原数组需要存在  取之前的名字  或者 更改源码
      window.UE.registerUI('test-button',  (editor, uiName) => {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        // editor.registerCommand(uiName, {
        //   execCommand: function () {
        //     editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
        //   }
        // })

        // 创建一个 button
        const btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: 'background-image: url(\'https://dacai-static-1304549078.cos.ap-shanghai.myqcloud.com/78f784218083487ddae2846960fe8fc818c2d8fa\') !important;background-size: cover',
          // 点击时执行的命令
          onclick: function () {
            that.fileUploadLibraryShow = true
          }
        })
        // 粘贴后的事件
        editor.addListener('afterpaste', function (cmd,html) {
        
        })
        // 粘贴前的事件
        editor.addListener('beforepaste',(cmd, html)=> {

        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      })
    }

这就是自定义按钮及其点击事件

当前焦点插入

好多会自定义素材库组件，选择完图片之后 插入到当前焦点位置，而不是文章最后

    // 素材库确定按钮传递数据
    change (data) {
        this.editorInstance.execCommand('inserthtml', `<img src="${*******}" >`);
    }