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);},