vue项目中的Tinymce富文本编辑器如何从word中粘贴图片上传到七牛云

Tinymce富文本编辑器粘贴图片时需要上传到自己的空间中才能被打开。

一、首先需要安装引入七牛云
npm install qiniu-js

var qiniu = require(‘qiniu-js’)
// or
import * as qiniu from ‘qiniu-js’
二、同时引入客户端生成的token

import {qiniuTokenCreate} from “@/assets/js/qiniu/qiniuTokenCreate”

此处生成token的方法请参考之前的一篇文章：https://blog.csdn.net/u014445517/article/details/95212636

三、在window.tinymce.init中添加属性方法：

// 整合七牛上传
        images_upload_handler: (blobInfo, success, failure, progress) => {
          // 这个函数主要处理word中的图片，并自动完成上传；
          let token=qiniuTokenCreate('image') // 前端自动生成的token
          let domain="http://image.i.haierzhongyou.com/" // 下载图片地址
          const file = blobInfo.blob() // 得到图片的file对象；
      
            // 限制上传文件的大小为200M
            if (file.size > 209715200) {
              const cur_size = Math.floor(file.size * 100 / 1024 / 1024) / 100
              Message({
                message: '上传文件大小不得超过200M 当前文件' + cur_size + 'M ',
                type: 'error',
                duration: 5 * 1000
              })
              console.log('上传文件大小不得超过200M 当前文件' + cur_size + 'M ')
              return false
            }
          const observer = {
            next: response => {
              // 上传进度'+Math.floor(response.total.percent)+'%'
              // total.loaded: number，已上传大小，单位为字节。
              // total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
              // total.percent: number，当前上传进度，范围：0～100。
              
              console.log('上传成功')
            },
            error: err => {
              // 上传失败触发
              failure('出现未知问题，刷新页面，或者联系程序员')
            },
            complete: response => {
              success(domain + response.key) // 上传成功后，调用success函数传入图片地址
              let key = response.hash  // 上传文件名
            }
          }
           // 可通过 subscription.unsubscribe() 停止当前文件上传 
          const putExtra = {
            // 文件原文件名
            fname: '',
            // 用来放置自定义变量
            params: {},
            // 用来限制上传文件类型，为 null 时表示不对文件类型限制
            // 限制类型放到数组里,如 mimeType: 
            mimeType: ['image/png', 'image/jpeg', 'image/gif']
          }
          const config = {
            // 是否使用 cdn 加速域名，默认false
            useCdnDomain: true,
            // 上传域名区域,当为 null 或 undefined 时，自动分析上传域名区域
            region: qiniu.region.z0
          }
          /*
            file: Blob 对象，上传的文件
            key: 文件资源名
            token: 上传验证信息，前端通过接口请求后端获得
            config: object
          */
          // 关键代码
          let options = {
            quality: 0.92,
            noCompressIfLarger: true,
            maxWidth: 1000,
            maxHeight: 618
          }
          qiniu.compressImage(file, options).then(data => {
            // data : {
            //   dist: 压缩后输出的 blob 对象，或原始的 file，具体看下面的 options 配置
            //   width: 压缩后的图片宽度
            //   height: 压缩后的图片高度
            // }
            var observable = qiniu.upload(data.dist, observer.complete.key, token,domain, putExtra, config)
            var subscription = observable.subscribe(observer) // 上传开始
          })
        },

最后，复制粘贴word中含图片的文档，查看效果：


参考文章：http://blog.ncmem.com/wordpress/2023/09/17/vue%e9%a1%b9%e7%9b%ae%e4%b8%ad%e7%9a%84tinymce%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e5%a6%82%e4%bd%95%e4%bb%8eword%e4%b8%ad%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/
欢迎入群一起讨论