600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能

vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能

时间:2018-12-06 19:08:38

相关推荐

vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能

Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏览器没有测试!

afterCreateSelf() {setTimeout(() => {if (this.editor) {var editerDoc = this.editor.edit.doc; //得到编辑器的文档对象let self = this;editerDoc.addEventListener("paste", function (e) {// let cbd = e.clipboardData;// let ua = window.navigator.userAgent;var ele = e.clipboardData.items;for (var i = 0; i < ele.length; ++i) {if (ele[i].kind == "file" &&ele[i].type.indexOf("image/") !== -1) {e.preventDefault(); //阻止默认动作,没有这句,图片会粘贴在富文本编辑器中var file = ele[i].getAsFile(); //得到二进制数据var formData = new FormData();formData.append("file", file); //name,value//uploadImg是封装的上传图片的方法uploadImg(formData).then((res) => {let _this = this;if (res.data.code === 0) {let img = res.data.data.url;let image = new Image();image.src = img;image.crossOrigin = "Anonymous";image.onload = function () {self.editor.insertHtml(`<img src="${img}" alt=\"\" />`);};} else {self.$message.error("上传失败!");}});}}});}}, 600);},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。