vue集成ueditor是時(shí)候遇到一些坑,分享一下,不定期更新
(有錯(cuò)誤望指正)
1.上傳的接口跨域問(wèn)題
現(xiàn)象說(shuō)明
ueditor默認(rèn)檢到上傳的圖片接口和本站域名不一致會(huì)啟用dataType為jsonp的方式傳輸,但是后端接口不支持jsonp
解決方法
ueditor/ueditor.all.js 8083行
注釋 isJsonp = utils.isCrossDomainUrl(configUrl);
改為 isJsonp=false
....
// core/loadconfig.js
(function(){
UE.Editor.prototype.loadServerConfig = function(){
var me = this;
setTimeout(function(){
try{
me.options.imageUrl && me.setOpt('serverUrl', me.options.imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2'));
var configUrl = me.getActionUrl('config'),
// isJsonp = utils.isCrossDomainUrl(configUrl);
isJsonp = false;
/* 發(fā)出ajax請(qǐng)求 */
me._serverConfigLoaded = false;
configUrl && UE.ajax.request(configUrl,{
'method': 'GET',
'dataType': isJsonp ? 'jsonp':'',
'onsuccess':function(r){
try {
var config = isJsonp ? r:eval("("+r.responseText+")");
utils.extend(me.options, config);
me.fireEvent('serverConfigLoaded');
me._serverConfigLoaded = true;
} catch (e) {
showErrorMsg(me.getLang('loadconfigFormatError'));
}
},
'onerror':function(){
showErrorMsg(me.getLang('loadconfigHttpError'));
}
});
} catch(e){
showErrorMsg(me.getLang('loadconfigError'));
}
});
function showErrorMsg(msg) {
console && console.error(msg);
//me.fireEvent('showMessage', {
// 'title': msg,
// 'type': 'error'
//});
}
};
UE.Editor.prototype.isServerConfigLoaded = function(){
var me = this;
return me._serverConfigLoaded || false;
};
UE.Editor.prototype.afterConfigReady = function(handler){
if (!handler || !utils.isFunction(handler)) return;
var me = this;
var readyHandler = function(){
handler.apply(me, arguments);
me.removeListener('serverConfigLoaded', readyHandler);
};
if (me.isServerConfigLoaded()) {
handler.call(me, 'serverConfigLoaded');
} else {
me.addListener('serverConfigLoaded', readyHandler);
}
};
})();
....
2.圖片上傳需要鑒權(quán)的問(wèn)題
現(xiàn)象說(shuō)明
后臺(tái)上傳圖片接口需要鑒權(quán)(請(qǐng)求的header里面需要加上Authorization),但是百度編輯器沒(méi)有提供這樣的配置
解決方法
/ueditor/dialogs/image/image.js 707行
在header['X_Requested_With'] = 'XMLHttpRequest';下面添加
header['Authorization']=window.localStorage.getItem('token');
uploader.on('uploadBeforeSend', function (file, data, header) {
var token = window.localStorage.getItem('token') || '';
if (token) {
header['Authorization']=token;
}
//這里可以通過(guò)data對(duì)象添加POST參數(shù)
header['X_Requested_With'] = 'XMLHttpRequest';
});
3.隱藏其他圖片上傳方式
現(xiàn)象說(shuō)明
需要隱藏下面的按鈕
image.png
解決方法
ueditor/dialogs/image/image.html 21行
注釋對(duì)應(yīng)顯示的html代碼
<div id="tabhead" class="tabhead">
<!-- <span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span> -->
<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
<!-- <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span> -->
</div>
4.按下shift鍵再按其他鍵時(shí)，不觸發(fā)contentChange事件
現(xiàn)象說(shuō)明
百度編輯的輸入框不能輸入~!@#$%^&*()等特殊字符,
原因是百度編輯器keydown事件過(guò)濾了shiftKey
解決方法
ueditor.all.js:14391行
將if (!keys[keyCode] && !evt.ctrlKey && !evt.metaKey && !evt.shiftKey && !evt.altKey) {
中的!evt.shiftKey判斷條件移除
me.addListener('keydown', function (type, evt) {
var me = this;
var keyCode = evt.keyCode || evt.which;
if (!keys[keyCode] && !evt.ctrlKey && !evt.metaKey && !evt.altKey) {
if (inputType)
return;
if(!me.selection.getRange().collapsed){
me.undoManger.save(false,true);
isCollapsed = false;
return;
}
if (me.undoManger.list.length == 0) {
me.undoManger.save(true);
}
clearTimeout(saveSceneTimer);
function save(cont){
cont.undoManger.save(false,true);
cont.fireEvent('selectionchange');
}
saveSceneTimer = setTimeout(function(){
if(inputType){
var interalTimer = setInterval(function(){
if(!inputType){
save(me);
clearInterval(interalTimer)
}
},300)
return;
}
save(me);
},200);
lastKeyCode = keyCode;
keycont++;
if (keycont >= maxInputCount ) {
save(me)
}
}
});
5.編輯器功能部分不能使用
現(xiàn)象說(shuō)明
編輯器添加序列功能部分不能使用,原因百度編輯器使用圖片實(shí)現(xiàn)樣式的,但是圖片的地址掛了
image.png
解決方法
注釋
insertorderedlist 的一些選項(xiàng)
ueditor/ueditor.config.js
,'insertorderedlist':{
//自定的樣式
// 'num':'1,2,3...',
// 'num1':'1),2),3)...',
// 'num2':'(1),(2),(3)...',
// 'cn':'一,二,三....',
// 'cn1':'一),二),三)....',
// 'cn2':'(一),(二),(三)....',
//系統(tǒng)自帶
'decimal' : '' , //'1,2,3...'
'lower-alpha' : '' , // 'a,b,c...'
'lower-roman' : '' , //'i,ii,iii...'
'upper-alpha' : '' , //lang //'A,B,C'
'upper-roman' : '' //'I,II,III...'
}
6.IE11及以下部分瀏覽器下不能發(fā)出ajax請(qǐng)求
現(xiàn)象說(shuō)明
ie11不能上傳圖片是因?yàn)闆](méi)有發(fā)起獲取配置的請(qǐng)求,
沒(méi)有發(fā)起請(qǐng)求是百度編輯器源碼有漏洞
解決方法
將以前的
//創(chuàng)建一個(gè)ajaxRequest對(duì)象
var fnStr = 'XMLHttpRequest()';
try {
new ActiveXObject("Msxml2.XMLHTTP");
fnStr = 'ActiveXObject(\'Msxml2.XMLHTTP\')';
} catch (e) {
try {
new ActiveXObject("Microsoft.XMLHTTP");
fnStr = 'ActiveXObject(\'Microsoft.XMLHTTP\')'
} catch (e) {
}
}
var creatAjaxRequest = new Function('return new ' + fnStr);
改為
//創(chuàng)建一個(gè)ajaxRequest對(duì)象
var fnStr = '';
try {
new XMLHttpRequest();
fnStr = 'XMLHttpRequest()';
} catch (error) {
try {
new ActiveXObject("Msxml2.XMLHTTP");
fnStr = 'ActiveXObject(\'Msxml2.XMLHTTP\')';
} catch (e) {
try {
new ActiveXObject("Microsoft.XMLHTTP");
fnStr = 'ActiveXObject(\'Microsoft.XMLHTTP\')'
} catch (e) {
}
}
}
var creatAjaxRequest = new Function('return new ' + fnStr);
