将django-filebrowser整合Ueditor作为图片管理器

Ueditor是国内广泛使用的一款开源编辑器，但是其缺点是图片管理功能比较简陋，图片选择不显示图片名，无法删除图片以及 无法创建文件夹等问题导致图片很难维护。

整合思路：给ueditor加入自定义对话框调用filebrowser接口并创建适合ueditor的filebrowser回调函数。

一、 创建ueditor的customize dialog

在static/ueditor/下新建customizes文件夹（这个文件夹名是自定义的），在里面创建selectImageDialog.js. 如下，

UE.registerUI('selectimage',function(editor,uiName){

    //创建dialog
    var dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径，这里只能支持页面
        iframeUrl:'/static/ueditor/dialogs/selectimage/select.html',
        //需要指定当前的编辑器实例
        editor:editor,
        //指定dialog的名字
        name:uiName,
        //dialog的标题
        title:"插入图片",

        //指定dialog的外围样式
        cssRules:"width:650px;height:400px;",

        //如果给出了buttons就代表dialog有确定和取消
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function () {
                    dialog.close(true);
                }
            },
            {
                className:'edui-cancelbutton',
                label:'取消',
                onclick:function () {
                    dialog.close(false);
                }
            }
        ]});

   
    var btn = new UE.ui.Button({
        name:'dialogbutton' + uiName,
        title:'dialogbutton' + uiName,
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules :'background-position: -380px 0;',
        onclick:function () {
            //渲染dialog
            dialog.render();
            dialog.open();
        }
    });

    return btn;
}/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);

这样就注册了一个自定义对话框，用于作为选取图片的容器。

然后再找到ueditor/static/dialogs/文件夹，创建selectimages文件夹。这里我们是基于ueditor原生的image对话框进行二次开发，可以直接复制过来然后修改。这里我把所有的文件名都改为select以作区分，文件结构如下：

selectimage/

--imags/