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} = window
UE.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.items
	if (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
	}
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值