Ueditor使用填坑！！！

1.上传的接口跨域问题

现象说明

ueditor默认检到上传的图片接口和本站域名不一致会启用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;

                /* 发出ajax请求 */

                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.图片上传需要鉴权的问题

现象说明

后台上传图片接口需要鉴权(请求的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对象添加POST参数

    header['X_Requested_With'] = 'XMLHttpRequest';

});


3.隐藏其他图片上传方式

现象说明

需要隐藏下面的按钮

image.png

解决方法

ueditor/dialogs/image/image.html 21行

注释对应显示的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键再按其他键时，不触发contentChange事件

现象说明

百度编辑的输入框不能输入~!@#$%^&*()等特殊字符,

原因是百度编辑器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.编辑器功能部分不能使用

现象说明

编辑器添加序列功能部分不能使用,原因百度编辑器使用图片实现样式的,但是图片的地址挂了


image.png

解决方法

注释

insertorderedlist 的一些选项

ueditor/ueditor.config.js

,'insertorderedlist':{

    //自定的样式

    // 'num':'1,2,3...',

    // 'num1':'1),2),3)...',

    // 'num2':'(1),(2),(3)...',

    // 'cn':'一,二,三....',

    // 'cn1':'一),二),三)....',

    // 'cn2':'(一),(二),(三)....',

    //系统自带

    '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及以下部分浏览器下不能发出ajax请求

现象说明

ie11不能上传图片是因为没有发起获取配置的请求,

没有发起请求是百度编辑器源码有漏洞

解决方法

将以前的

//创建一个ajaxRequest对象

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

改为

//创建一个ajaxRequest对象

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.解决在线图片预览MIME问题

报错

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

    });

});

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容