富文本实现图片粘贴

场景

当前公司所用的 tinymce 富文本编辑器从本地粘贴来的图片地址为本地路径，从 word 文档粘贴的图片为base64均不符合业务需求.

解决方案

通过给富文本编辑器内文本框绑定粘贴监听事件获取 file 文件

实现方式

//在editor组件初始化配置setup中绑定粘贴监听事件
editor.on("paste", this.pasting);

    pasting (e) {
    //获取粘贴对象中的文本（支持本地多图片粘贴以及word中单张图片粘贴）
      let files = e.clipboardData.files
      if (files.length !== 0) {
        this.uploadFiles(files)
        return false  //取消图片默认粘贴事件
      }
    },

    uploadFiles (files) {
      for (let key in files) {
        // 目前设置只上传图片
        if (!(files[key].type && files[key].type.startsWith('image/'))) return
        var formData = new FormData();
        formData.append("file", files[key]);
        formData.append("path", 'icon');
        formData.append("bucketName", this.$store.getters.bucketName);
        this.$http.request({
          method: 'POST',
          url: this.fileServer,
          data: formData,
          headers: { 'Content-Type': 'multipart/form-data' }
        }).then((res) => {
          //通过editor.insertContent往富文本编辑器中加入图片标签
          this.onUploadSuccess(res.data)
        })
      }
    }