tinymce粘贴图片自动上传的方法

栏目: rich-text-editor 发布时间:2021-12-24

本文简述使用 powerpaste 插件实现 tinymce 粘贴图片自动上传的方法

准备工作

自行下载 powerpaste 插件,放到 tinymce 的 plugins 目录下

实例代码

tinymce.init({
  selector: '#tinymce',
  // 使用 powerpaste 插件
  plugins: ['powerpaste'],
  images_upload_handler: (blobInfo, success, failure) => {
    // 这里的 ossService 提供图片上传方法
    // 我们在项目中实际上传到阿里云 oss
    // 读者请更换为自己项目中的图片上传方法
    ossService
      .upload({
        business: 'image',
        isPrivate: false,
        file: blobInfo.blob()
      })
      .subscribe(val => {
        // 图片上传成功后将粘贴到富文本中的图片地址替换为服务端图片地址
        success(val.url)
      })
  }
})

本文地址:https://www.tides.cn/p_rich-text-editor-tinymce-powerpaste

标签: tinymce powerpaste