Ueditor使用填坑！！！

1.上傳的接口跨域問題

現(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)的問題

現(xiàn)象說(shuō)明

后臺(tái)上傳圖片接口需要鑒權(quán)(請(qǐng)求的header里面需要加上Authorization),但是百度編輯器沒有提供這樣的配置

解決方法

/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;

? ? }

? ? //這里可以通過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事件過濾了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)闆]有發(fā)起獲取配置的請(qǐng)求,

沒有發(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);


7.解決在線圖片預(yù)覽MIME問題

報(bào)錯(cuò)

Refused to execute script from 'http://localhost:8081/ueditor/config?start=0&size=20&action=listimage&callback=bd__editor__s66i6f' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

解決

解決辦法是把 MIME type 的 text/html 改成 application/x-javascript


8.ueditor自定義額外參

var ue = ue.setContent('123456');

ue.ready(function() {

????ue.execCommand('serverparam', {

????????'fileName': '/article/content/'

????});

});

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容