自定Tinymce富文本中的图片上传

Posted 2020-11-28 lenghaha

在引入组件上添加 上传图片的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);
            });
        }

然后就可以在插入/编辑中上传图片了