zoukankan      html  css  js  c++  java
  • 自定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);
                });
            }
    

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

    Y8AW4g.jpg

  • 相关阅读:
    第二轮冲刺-Runner站立会议06
    第二轮冲刺-Runner站立会议05
    第二轮冲刺-Runner站立会议04
    找水王续
    第二轮冲刺-Runner站立会议03
    第二轮冲刺-Runner站立会议02
    用户故事与敏捷开发方法笔记05
    软件需求与分析课堂讨论1
    16秋进度条3
    用户故事与敏捷开发方法笔记04
  • 原文地址:https://www.cnblogs.com/lenghaha/p/12864712.html
Copyright © 2011-2022 走看看