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

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

富文本编辑器三种不同图片上传功能
最近在集成富文本和fastDFS文服做图片上传,找了写相关资料,感觉官网的比较全也比较杂.刚好看到一片好的文章,然后我就转载并对不太详细的地方进行了一定的修改并新添加了一种前后端分离的方法.各位小伙 ...
富文本编辑器宽度自适应及取消自动保存功能
1.富文本编辑器宽度自适应设置初始化富文本编辑器是设置属性 initialFrameWidth: '100%' 2.富文本编辑器取消自动保存功能在ueditor.all.js中找到 UE.reg ...
vue-quill-editor富文本编辑器使用，附带图片更改大小功能
1.Vue项目安装依赖 npm install vue-quill-editor --save npm install quill-image-resize-module --save 2.项目引用, ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
富文本编辑器 Kindeditor 的使用和常见错误
富文本编辑器 Kindeditor 的使用和常见错误错误一问题描述:批量图片上传弹窗中没有添加图片按钮原因以及解决:按钮资源(.swf)被拦截错误二问题描述:图片上传失败原因分析:批量 ...
easyUI整合富文本编辑器KindEditor详细教程
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能（代码）
本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...

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

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

最新文章

热门文章