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.添加一张就上传一张。
// 将上面的 automatic_uploads 设置为true 即可