tinymce 富文本一些问题-526互联

1.图片上传后后台返回地址但富文本中的地址不对

// tinymce默认对URL进行了处理，关闭URL转换即可
// https://www.tiny.cloud/docs/tinymce/6/url-handling/#convert_urls
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  convert_urls: false
});

2.图片上传

1.首先上传为base64，存储在本地，提交时调用images_upload_handler先将图片上传返回URL地址，tinymce自动替换，然后提交到后台

// 1.先将automatic_uploads属性设置为false
// 2.配置images_upload_handler
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  automatic_uploads: false,
  init_instance_callback: (editor: any) => {
  editor.setContent("")
  },
  images_upload_handler: (blobInfo: any, _progress: Function) => {
  return new Promise((resolve, reject) => {
    let formData = new FormData()
    formData.append('File', blobInfo.blob(), blobInfo.filename())
    http.post<string>(`/UploadImage`, formData, {
        headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
        onUploadProgress(progress: any) {
          _progress(Math.round((progress.loaded / progress.total) * 100))
        },
      })
      .then((json: any) => {
        resolve(`${json.location}`)
      })
      .catch((err) => {
        reject(err)
      })
    })
  }
});
// 3.在提交之前先调用uploadImages上传图片，将图片的base64转换为url。
tinymce.activeEditor.uploadImages().then((res) => {
  document.forms[0].submit();
});

2.添加一张就上传一张。