自定Tinymce富文本中的圖片上傳

在引入組件上添加 上傳圖片的url地址

<tinymce
    :height="300"
    ref="tinymce"
    //上傳圖片的url地址
    upload-url="http://baidu/uploadImg"
    v-model="form.content2"
            ></tinymce>

在Tinymce中找到index.vue

props中添加傳過來的地址

// 接收傳過來的地址
uploadUrl: {
    type: String,
    required: true
}

引入axios 添加如下方法

// 這個方法加上  富文本 自動添加上傳按鈕
        images_upload_handler(blobInfo, success, failure, progress) {
          // tinymce api文檔查閱可知   直接獲取blob原始數據
          var blob = blobInfo.blob();
          // 原生上傳
          var fd = new FormData();
          fd.append("file", blob);
          // console.log(_this.uploadUrl, fd);
          // 上傳到 通用上傳接口   oss里
          axios
            .post(_this.uploadUrl, fd)
            .then(res => {
              const resData = res.data;
              if (resData.code == "S") {
                // 固定寫法  為了符合 tinymce的 上傳成功回調顯示
                success(resData.ossUrl);
                // 這里用於實現  把上傳后的 url 直接以img形式拼接到 					富文本內容中的光標處
                // window.tinymce
                //   .get(_this.tinymceId)
 	//   .insertContent(`<imgsrc="${resData.ossUrl}" >`);
              }
            })
            .catch(err => {
              failure("出現未知問題");
              console.log(err);
            });
        }

然后就可以在插入/編輯中上傳圖片了