tinymce 富文本一些问题
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 即可
作者:奇
出处:https://www.cnblogs.com/fanqisoft/p/17819296.html
版权:本作品采用「本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。」许可协议进行许可。
分类:
开发填坑
, TS/ES/JS/Node
如果文章内容对您有所帮助,欢迎赞赏.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2021-11-09 Visual Studio 2022(VS2022)激活密钥
2019-11-09 TypeScript的类型