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/

欢迎入群一起讨论