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

版权:本作品采用「本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。」许可协议进行许可。

posted @   SpringCore  阅读(259)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源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的类型
more_horiz
keyboard_arrow_up light_mode palette
选择主题
点击右上角即可分享
微信分享提示