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

标签：成功   required   jpg   rtc   tinymce   tps   内容   ax1   文档   

在引入组件上添加 上传图片的url地址

在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(``);
              }
            })
            .catch(err => {
              failure("出现未知问题");
              console.log(err);
            });
        }

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

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

标签：成功   required   jpg   rtc   tinymce   tps   内容   ax1   文档   

原文地址：https://www.cnblogs.com/lenghaha/p/12864712.html