VUE 百度UE自定义上传图片按钮

addCustomButtom重点这个方法

addCustomButtom (editorId) {
          var that = this;
          window.UE.registerUI('test-button', function (editor, uiName) {
            // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
              execCommand: function () {
                editor.execCommand('inserthtml', ``);
              }
            })

            // 创建一个 button
            var btn = new window.UE.ui.Button({
              // 按钮的名字
              name: uiName,
              // 提示
              title: '插入文字',
              // 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
              cssRules: "background-position: -380px 0px;",
              // 点击时执行的命令
              onclick: function () {
                // 这里是我自己封装的上传图片功能可以忽略, 重点插入图片 editor.execCommand('inserthtml', '');
                window.qiniuChange('.ueUpload #pickfiles',function(url){
                  // console.log(url);
                  editor.execCommand('inserthtml', '');
                  document.getElementById('pickfiles').value='';
                })
                // console.log('自定义button')

              }
            })

            // 当点到编辑内容上时,按钮要做的状态反射
            editor.addListener('selectionchange', function () {
              // var state = editor.queryCommandState(uiName);
              // if (state === -1) {
              //   btn.setDisabled(true);
              //   btn.setChecked(false);
              // } else {
              //   btn.setDisabled(false);
              //   btn.setChecked(state);
              // }
            })

            // 因为你是添加 button,所以需要返回这个 button
            return btn;
          }, 55 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
        },

你可能感兴趣的:(VUE 百度UE自定义上传图片按钮)