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

<vue-ueditor-wrap :config="config" ref="ued" @ready="ready" @beforeInit="addCustomButtom"></vue-ueditor-wrap>

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', '<img src="'+url+'"/>');
                window.qiniuChange('.ueUpload #pickfiles',function(url){
                  // console.log(url);
                  editor.execCommand('inserthtml', '<img src="'+url+'"/>');
                  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 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
        },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名小码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值