松鼠的博客

項(xiàng)目引入的是UEditor富文本編輯器，由于安全（把攻擊腳本偽造成圖片）和圖片大?。╞ase64格式的圖片可能會(huì)太大）的原因，用戶輸入的圖片都要先發(fā)送給后端，然后拿到后端的鏈接賦值給image標(biāo)簽的src屬性。

這里有兩種處理辦法：
第一種：
在ueditor.config.js里面的window.UEDITOR_CONFIG（配置項(xiàng)主體）加上imageUrl參數(shù)，大概32行處：

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

但是由于這里的代碼太多了，不容易維護(hù)，所以我用第二種方法去處理：
重寫getActionUrl方法，在src/extend里面，創(chuàng)建一個(gè)ueditor文件夾專門對(duì)UEditor編輯器的問題進(jìn)行維護(hù)修改：

let {UE} = window
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
/**
* 根據(jù)action名稱獲取請(qǐng)求的路徑
* @method getActionUrl
* @remind 假如沒有設(shè)置serverUrl,會(huì)根據(jù)imageUrl設(shè)置默認(rèn)的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)
}

這樣寫方便代碼的維護(hù)，并且容易對(duì)后進(jìn)行拓展。

這時(shí)候使用工具欄的上傳圖片功能就處理完了，但是粘貼的圖片有時(shí)候不會(huì)觸發(fā)上述方法，不知道大家有沒有這種情況，真是納悶，檢查發(fā)現(xiàn)是有時(shí)候粘貼的圖片是在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)) {
// 有時(shí)候粘貼的圖片會(huì)在第二位
return {
0: item[1],
length: 1
}
} else {
return null
}
} else {
return null
}
}

參考文章：http://blog.ncmem.com/wordpress/2023/12/27/ueditor%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e5%9b%be%e7%89%87%e7%b2%98%e8%b4%b4%e5%92%8c%e4%b8%8a%e4%bc%a0%e9%97%ae%e9%a2%98/

歡迎入群一起討論