600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > UEditor富文本编辑器图片粘贴和上传问题

UEditor富文本编辑器图片粘贴和上传问题

时间:2020-05-09 03:09:46

相关推荐

UEditor富文本编辑器图片粘贴和上传问题

项目引入的是UEditor富文本编辑器,由于安全(把攻击脚本伪造成图片)和图片大小(base64格式的图片可能会太大)的原因,用户输入的图片都要先发送给后端,然后拿到后端的链接赋值给image标签的src属性。

这里有两种处理办法:

第一种:

ueditor.config.js里面的window.UEDITOR_CONFIG(配置项主体)加上imageUrl参数,大概32行处:

重写ueditor.all.js里面的getActionUrl方法,差不多在8776行

但是由于这里的代码太多了,不容易维护,所以我用第二种方法去处理:

重写getActionUrl方法,在src/extend里面,创建一个ueditor文件夹专门对UEditor编辑器的问题进行维护修改:

let {UE} = windowUE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl/*** 根据action名称获取请求的路径* @method getActionUrl* @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径* @param { String } action action名称* @example* ```javascript* editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"* editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"* editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"* editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"* ```*/UE.Editor.prototype.getActionUrl = function _getActionUrl(action) {if (action === 'uploadimage') {return 'xxx' // 图片接口地址}// ... return this._bkGetActionUrl(action)}

这样写方便代码的维护,并且容易对后进行拓展。

这时候使用工具栏的上传图片功能就处理完了,但是粘贴的图片有时候不会触发上述方法,不知道大家有没有这种情况,真是纳闷,检查发现是有时候粘贴的图片是在clipboardData的第二位???,emmm,只能去修改getPasteImage方法了,大概在26589行。

function getPasteImage(e) {var item = e.clipboardData && e.clipboardData.itemsif (item) {var reg = /^image\//if (item.length === 1 && reg.test(item[0].type)) {return item} else if (item.length === 2 && reg.test(item[1].type)) {// 有时候粘贴的图片会在第二位return {0: item[1],length: 1}} else {return null}} else {return null}}

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