基于UEditor编辑器二次开发

需求：

1、在原有ueditor编辑器的音频上添加标题；

2、在原有ueditor编辑器的视频上添加上传封面图片(ps:就不能后台获取吗。。一定要前端做)；

准备资料：(心路历程...)

头儿说：我们的原则是，不能改变他本身的ueditor.all.min.js 或者ueditor.all.js.........不能改变！不能改变！不能改变！

1、我们的后台是.net环境，首先，我去下载了UE的完整包，在这个目录下可以看到他的完整的插件管理代码：

这里的插件代码可以对照着ueditor.all.js里面看，就能大致明白添加插件的流程（如果可以改核心的这个文件，就方便多了.....）；

2、http://fex.baidu.com/ueditor/#dev-developer 这个是官方的二次开发文档；

3、http://www.dookay.com/n/12290 这个是网上提供的二次开发的例子；

开始：

1、在原有的引入ueditor的下面加上如下代码，

                                        
 /*这个页面中放新增的按钮*/

2、addTool.js中的内容如下：

UE.registerUI('lspace filterhtml video audio',function(editor,uiName){
    switch (uiName) {
        case "audio":
            var dialog_audio = new UE.ui.Dialog({
                editor:editor,
                name:uiName,
                title:"音频",
                cssRules:"width:560px;height:200px;",
                //对话框也可以嵌入iframe：
                iframeUrl:'../../js/UE/dialogs/newaudio/audio.html',
                buttons:[
                {
                    className:'edui-okbutton',
                    label:'确定',
                    onclick:function () {
                        var _iframe = document.getElementById(dialog_audio.id+'_iframe').contentWindow; 
                        var _audioUrl = _iframe.document.getElementById('audioUrl').value;
                        var _audioTitle = _iframe.document.getElementById('audioTitle').value;
                        var _s = '';
                        console.log(_s)
                        editor.focus();  
                        editor.execCommand('inserthtml',_s);
                        dialog_audio.close(true);
                        }
                    },
                   {
                        className:'edui-cancelbutton',
                        label:'取消',
                        onclick:function () {
                            dialog_audio.close(false);
                        }
                   }
                ]});
            var btn = new UE.ui.Button({
                title:'音频',
                name:'myFirst'+uiName,
                cssRules :'background-position: -700px -400px;',
                onclick:function () {
                    //渲染对话框并弹出
                    dialog_audio.render();
                    dialog_audio.open();
                }
            });
            return btn;
            break;
        default:
            return ;
            break;
    }    
},[34]);

// 实例化ueditor
UE.getEditor('myEditor', {
    toolbars:[['video']]
});

audio.html 文件就是弹层页面；

最下面的34代表新增按钮放置在ueditor上的位置（可随意）

这里我就贴了audio的添加方式，视频也是一样的。

（拖了好久...终于写好了...开心(*^▽^*)）

ps: 上一下最终完成的效果图：

音频：

~~~

视频：

~~~

好啦~~~~结束。