百度 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 應高於所有層)

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: