项目引入的是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
}
}