[vue] Tinymce rich text editor does not want to convert uploaded pictures to base64, but to link

Foreword: Recently, I need to use a rich text editor in my project. I think tinymce is very good and I use it. For details on how to use it in the project, please refer to [vue] Tinymce
rich text editor in vue2
[vue] Tinymce data echo problem | The first time After the normal echo, it shows a blank bug and cannot be edited

In the past two days, I have encountered a new problem. After uploading the picture, I checked the address bar and found that it is base64, which is as follows. Generally speaking, there
insert image description here
is no problem with this, after all, the picture is displayed. But uploading multiple pictures will lead to too large response body (the backend response is too slow, and the base64 picture is too large when optimizing), so I want to directly put a link to echo, as follows

insert image description here
How to achieve? I found a lot of articles, and after a long time of reference, I finally got it right. Let me summarize it.
Introduction and Getting Started \ Upload pictures and files
vue—tinymce paste pictures [perfect solution]
plug-in \ paste paste plug -in
gitee-wpspaster
tinymce realizes automatic upload of pasted pictures

The specific operation is as follows:

I modified it based on my previous use of tinymce,

Step 1: Configure and paste [paste] specific configuration items

tinymce.init({
    
    
  selector: '#tinydemo',
  plugins: 'paste',
  toolbar: 'paste',
  paste_data_images: true // 默认是false的,记得要改为true才能粘贴
})

Step 2: Configure the image upload function

images_upload_handler: (blobInfo, success, failure) => {
    
    
  var xhr, formData;
  var file = blobInfo.blob(); //转化为易于理解的file对象
  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  // 图片上传路由
  xhr.open("POST", process.env.VUE_APP_BASE_API + "/common/upload");
  xhr.onload = () => {
    
    
    var json;
    if (xhr.status != 200) {
    
    
      // failure("上传失败: " + xhr.status);
      return;
    }
    json = JSON.parse(xhr.responseText);
    // json是后端返回的数据,其中就包含链接
    if (!json || typeof json.location != "string") {
    
    
      // failFun("上传成功:");
      // succFun(json.url);
      success(process.env.VUE_APP_BASE_API + json.fileName);
      return;
    }
  };
  formData = new FormData();
  formData.append("file", file, file.name); //此处与源文档不一样
  xhr.setRequestHeader("Authorization", "Bearer " + getToken());
  xhr.send(formData);
},

The following code completes the system verification and can be adjusted according to the project. It can be omitted if not needed.
xhr.setRequestHeader("Authorization", "Bearer " + getToken());

So far, image rendering is in the form of links.

Guess you like

Origin blog.csdn.net/qq_46123200/article/details/132032675