百度 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 应高于所有层）