tinymce富文本复制图片上传OSS

最近在项目中第一次用到tinymce富文本就碰到这个问题,看了tinymce官方文档,有高级插件可以实现,但都是需要收费的,也查找了很多资料,在网上没找到一个完整的相关文章,或者有很多累赘;笔者就自己花了点时间来研究,顺便做个随笔;

本篇文章是tinymce中复制图片直接粘贴上传到阿里云OSS的一个小案例,也可以提出来单独使用,下面有明确说明:

代码中每一步备注说明都很清晰

好了言归正传

上代码

client具体数据从你们后台要接口,无需多言,直接开始下一步

  images_upload_handler: this.imgUpload

tinymce富文本编辑器调用粘贴板(Ctrl+v)方法, 配合tinymce的plugins: "image"来使用

当然,下面代码也可以直接提出来单独使用,上干货 ↓ ↓ ↓

还是代码比较直接

onPaste(event) {
      let _this = this
      // 实现图片粘贴上传
      const items = (event.clipboardData || window.clipboardData).items;
      // items为伪数组  微信/QQ截图以及此富文本区域内复制粘贴的length为1,鼠标右键复制粘贴图片以及文本的复制粘贴的length为2;
      let len = items.length
      for (let i = 0; i < len; i ++) {
        if (items[i].kind == 'file' && items[i].type.indexOf('image') != -1) {
        // 判断是否为图片类型
          event.preventDefault(); // 如果是图片阻止自动粘贴到富文本编辑器
          let file = items[i].getAsFile(); // 获取文件数据
          let blob = new Blob([file],{ type: file.type }) //实例化一个blob 将图片大小以及类型初始化到blob里          
          let index = file.name.lastIndexOf(".");
          let fileName = Date.now() + file.name.substring(index, file.name.length);
          // fileName --- 图片名称可自行处理
          console.log("粘贴的是图片类型")
          client(_this.aliyun).multipartUpload(fileName, blob).then((result) => {
             // 上传图片   _this.aliyun为后台接口返回的数据赋值给client
            if (result.res.requestUrls) {
              let url = result.res.requestUrls[0].indexOf('http://') != -1 ? result.res.requestUrls[0].replace('http://', 'https://') : result.res.requestUrls[0];
              // 个人需求---默认加载为https做的处理(可省略)
              let last = url.lastIndexOf("?"); 
              if (last != -1 && last > index) {
                tinyMCE.execCommand("mceReplaceContent",false,``)
                // 图片上传成功,插入到富文本编辑器
              } else {
                tinyMCE.execCommand("mceReplaceContent",false,``)
                // 图片上传成功,插入到富文本编辑器
              }
            }
          })
          .catch(function (err) {
            // 上传错误可自行给出提示
            console.log(err);
          })
        } else {
          // 不是图片类型直接粘贴, 跳过oss上传处理
          console.log("粘贴的不是图片");
        }
      }
    }

目前仅支持微信/QQ截图以及点击鼠标右键复制粘贴,当然,亲测world图片点击鼠标右键复制粘贴或者直接选中复制粘贴的上传也OK; 但是目前只可以单个图片上传,后期如果找到好点的方法再优化一下

如果小伙伴们有更好的方法,望不吝赐教

如果有用,点个赞再走呗,谢谢 ! ! !
欢迎评论区留言

声明：创作不易,转载请注明出处