百度 UEditor 繫結插入圖片、插入檔案事件
1、在 Editor render 之後增加偵聽器,繫結 beforeexeccommand 或 afterexeccommand 事件;
2、事件繫結後可以截獲 insertimage 事件,但是截獲後的事件只有兩個引數,分別為 : beforeexeccommand 或 insertimage 資訊,但是缺少事件的引數資訊;
3、修正 editor_all.js 指令碼中關於事件繫結的設定,查詢 beforeexeccommand 關鍵字,可以找到以下程式碼區:
execCommand : function ( cmdName ) {
cmdName = cmdName.toLowerCase();
var me = this,
result,
cmd = me.commands[cmdName] || UE.commands[cmdName];
if ( !cmd || !cmd.execCommand ) {
return;
}
if ( !cmd.notNeedUndo && !me.__hasEnterExecCommand ) {
me.__hasEnterExecCommand = true;
if(me.queryCommandState(cmdName) !=-1){
me.fireEvent( 'beforeexeccommand', cmdName);
result = this._callCmdFn( 'execCommand', arguments );
me.fireEvent( 'afterexeccommand', cmdName);
}
me.__hasEnterExecCommand = false;
} else {
result = this._callCmdFn( 'execCommand', arguments );
}
me._selectionChange();
return result;
},
4、修正 2 個 fireEvent 方法為:
me.fireEvent( 'beforeexeccommand', cmdName,arguments
result = this._callCmdFn( 'execCommand', arguments );
me.fireEvent( 'afterexeccommand', cmdName ,arguments);
5、修正後在 render 之後的使用如下的方法:
var editor_a = new baidu.editor.ui.Editor(editorOption);
editor_a.render('editor');
editor_a.addListener("afterexeccommand", function (t, e, arg) {
alert(e);
});
這樣就可以截獲: e 就為 "insertImage" , arg 為插入圖片的引數資訊,多幅圖片為陣列模式。解析方法:opt = utils.isArray(opt) ? opt : [opt];
6 、修正 editor_all.js 指令碼 增加 "insertfile" 命令方法,如下:
// --> 附加上傳附件
UE.commands['insertfile'] = {
execCommand : function (cmd, ci){
var me = this;
var inf = "(" + cmd + ")-> src=[" +ci.url + "]<br> origin=[" + ci.original + "]<br>"; // 這裡以後修正為插入 HTML 的資訊
me.execCommand("inserthtml", inf);
}
};
7、修正 Ueditor\dialogs\attachment\attachment.html (上傳檔案對話方塊) 中的 dialog.onok 指令碼,如下:
dialog.onok = function () {
// var map = fileTypeMaps,
// str="";
// for(var i=0,ci;ci=filesList[i++];){
// var src = editor.options.UEDITOR_HOME_URL + "dialogs/attachment/fileTypeImages/"+(map[ci.type]||"icon_default.png");
// str += "<p style='line-height: 16px;'><img src='"+ src + "' data_ue_src='"+src+"' />" +
// "<a href='"+editor.options.filePath + ci.url+"'>" + ci.original + "</a></p>";
// }
// editor.execCommand("insertHTML",str);
for (var i = 0, ci; ci = filesList[i++]; ) {
editor.execCommand("insertfile", ci);
}
swfupload.destroy();
};
8、這樣就可以在 beforeexeccommand 或 afterexeccommand 時截獲 "insertfile" 事件並獲取相關檔案資訊了。
9、修正彈出對話方塊 的 zIndex ,在 editor_all.js 中查詢:Dialog = baidu.editor.ui.Dialog = function (options) 方法,修正一下 1 個地方
//this.editor.container.style.zIndex && (this.getDom().style.zIndex = this.editor.container.style.zIndex * 1 + 10);
this.editor.container.style.zIndex && (this.getDom().style.zIndex = this.editor.container.style.zIndex * 1 + 500);
並在 config.js 中增加
, zIndex: 75 //編輯器層級的基數,預設是900
, zIndex_DialogOver: 500 // 彈出對話方塊 高於 zIndex 的層數 ( zIndex + zIndex_DialogOver 應高於所有層)