最近在项目中第一次用到tinymce富文本就碰到这个问题,看了tinymce官方文档,有高级插件可以实现,但都是需要收费的,也查找了很多资料,在网上没找到一个完整的相关文章,或者有很多累赘;笔者就自己花了点时间来研究,顺便做个随笔;
本篇文章是tinymce中复制图片直接粘贴上传到阿里云OSS的一个小案例,也可以提出来单独使用,下面有明确说明:
代码中每一步备注说明都很清晰
好了言归正传
上代码
client具体数据从你们后台要接口,无需多言,直接开始下一步
images_upload_handler: this.imgUpload
tinymce富文本编辑器调用粘贴板(Ctrl+v)方法, 配合tinymce的
plugins: "image"来使用
当然,下面代码也可以直接提出来单独使用,上干货 ↓ ↓ ↓
还是代码比较直接
onPaste(event) {
let _this = this
// 实现图片粘贴上传
const items = (event.clipboardData || window.clipboardData).items;
// items为伪数组 微信/QQ截图以及此富文本区域内复制粘贴的length为1,鼠标右键复制粘贴图片以及文本的复制粘贴的length为2;
let len = items.length
for (let i = 0; i < len; i ++) {
if (items[i].kind == 'file' && items[i].type.indexOf('image') != -1) {
// 判断是否为图片类型
event.preventDefault(); // 如果是图片阻止自动粘贴到富文本编辑器
let file = items[i].getAsFile(); // 获取文件数据
let blob = new Blob([file],{ type: file.type }) //实例化一个blob 将图片大小以及类型初始化到blob里
let index = file.name.lastIndexOf(".");
let fileName = Date.now() + file.name.substring(index, file.name.length);
// fileName --- 图片名称可自行处理
console.log("粘贴的是图片类型")
client(_this.aliyun).multipartUpload(fileName, blob).then((result) => {
// 上传图片 _this.aliyun为后台接口返回的数据赋值给client
if (result.res.requestUrls) {
let url = result.res.requestUrls[0].indexOf('http://') != -1 ? result.res.requestUrls[0].replace('http://', 'https://') : result.res.requestUrls[0];
// 个人需求---默认加载为https做的处理(可省略)
let last = url.lastIndexOf("?");
if (last != -1 && last > index) {
tinyMCE.execCommand("mceReplaceContent",false,`<img class="wscnph" src="${url.split("?")[0]}" >`)
// 图片上传成功,插入到富文本编辑器
} else {
tinyMCE.execCommand("mceReplaceContent",false,`<img class="wscnph" src="${url}" >`)
// 图片上传成功,插入到富文本编辑器
}
}
})
.catch(function (err) {
// 上传错误可自行给出提示
console.log(err);
})
} else {
// 不是图片类型直接粘贴, 跳过oss上传处理
console.log("粘贴的不是图片");
}
}
}
目前仅支持微信/QQ截图以及点击鼠标右键复制粘贴,当然,亲测world图片点击鼠标右键复制粘贴或者直接选中复制粘贴的上传也OK; 但是目前只可以单个图片上传,后期如果找到好点的方法再优化一下
如果小伙伴们有更好的方法,望不吝赐教
如果有用,点个赞再走呗,谢谢 ! ! !
欢迎评论区留言
声明：创作不易,转载请注明出处
