ueditor 1.4.3.2 独立/单独 上传图片框原理

其实简单的说就是编辑框很多按钮，所有按钮的功能都是以command形式提供，所以execCommand就是执行这些功能的命令。
有些按钮是能弹出显示一个对话框，他的基类就是dialog，而所有被弹出的dialog框子都在dialogs文件夹中，也就是说逻辑就在那里面。
我们上传图片完事后会有个确认和取消的按钮，这个按钮来自于dialog基类，这个类厘米有个onok就是我们关注的内容了，点击确定了才能将文件插入到编辑框文档中嘛，所以关注它，在这个代码逻辑中确实实现了该按钮的功能，也就是上述的execCommand('inserimage')，而调头回去看整体代码all.js中，看到了insertimage功能部分，有两个事件可以被我们用editor.addListener所截获，一个是beforeinsertimage，一个是afterinsertimage，所以我们可以在我们的代码中加入这个事件来获取得到我们想要的被上传的文件地址了。

也就大功告成了！

下面详情：

3、UEditor 1.4.3.2版本单独（独立打开上传图片窗口）

/**
* Created by Web on 16/3/4.
*/

/*
资源来自:http://blog.csdn.net/yangzhihello/article/details/16975607

使用方法：
我这里没写完，主要讲一下代码原理啊，其实下面代码已经可以用了，你可以再自己改一下吧。
$('你的按钮').upload(function(list){

});

*/
(function($){
var upload = {
editor:null,
init:function(editorid,callback){
var _editor =this.getEditor(editorid);
_editor.ready(function () {

//_editor.setDisabled(); // 如果使用这个则无法获取到事件

_editor.hide();
_editor.addListener('beforeinsertimage', function (t, args) {
//$("#"+keyid).val(args[0].src);
callback(args);
console.log(t)
console.log(args)
alert(args);
});
});
},
getEditor:function(editorid){
this.editor = UE.getEditor(editorid);
return this.editor;
},
show:function(that){
var _editor = this.editor;
//注意这里只需要获取编辑器，无需渲染，如果强行渲染，在IE下可能会不兼容（切记）
//和网上一些朋友的代码不同之处就在这里
$(that).click(function(){
var image = _editor.getDialog("insertimage");
image.render();
image.open();
});
},
render:function(editorid){
var _editor = this.getEditor(editorid);
_editor.render();
}
};

/*
* 事件激发对象
* 存放图片容器
* */

$.fn.upload = function(callback){

$('#ueditor-upload').size() <= 0 && $('<script id="ueditor-upload" type="text/plain" style="display:none"></script>').appendTo('body');
upload.init("ueditor-upload",callback);
upload.show(this);
}

})(jQuery);

全部解释：

我先说一下怎么回事啊，
首先UEditor有个基类叫Dialog，你可以在ueditor.all.js（该文件将项目所有JS合并到一起了）搜到这个类，
关键词Dialog.prototype或Dialog = baidu.ed都能搜到，行数26809

你看这个基类里面有个open方法，open肯定是打开窗口呀？所以我们点那个按钮才会弹出个框么，
再看看我们的上传图片的窗口，它实际在你的UEditor下载的包中的dialogs文件夹中的image文件夹
里面有几个文件，

其中image.js就是它真实的代码逻辑了，之前1.3.6以前的版本都是用swfupload，后来用了webuploader（这是我咬牙看github上的各个版本区别的时候发现的）
确定按钮的代码在image.js中的74行，关键词：function initButtons() {

这个onok的方法就是dialog基类中的确认按钮了，我们看他干了什么。

case 'upload':
list = uploadImage.getInsertList();

var count = uploadImage.getQueueCount();
if (count) {
$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
return false;
}
break;

他判断了个id，因为有4个选项卡么，什么插入图片、上传图片、远程图片什么的，我们关注的是上传图片，
所以看了这个case

他在上传完成后没有问题的情况下不return，否则返回false也就上传失败了，再往下看

if(list) {
editor.execCommand('insertimage', list);
remote && editor.fireEvent("catchRemoteImage");
}

如果有文件列表的话（上传成功），那么就execCommand(insertimage)了，那么这代码从来哪来的？是在ueditor.all.js中的11090行，
关键词：UE.commands['insertimage'] = {

if(me.fireEvent('beforeinsertimage', opt) === true){
return;
}
这里他有个fireEvent的beforeinsertimage，所以我们可以截获这个事件！

那么有了上述给出的代码，

_editor.addListener('beforeinsertimage', function (t, args) {
//$("#"+keyid).val(args[0].src);
callback(args);
console.log(t)
console.log(args)
alert(args);
});

然后我们就可以在这里取出那个列表值，也就是上传图片的真实路径了，那么我加了个callback，我可以在自己的页面DOM中处理完成后的事件了。

还有点其他的记录一下：

1、UEditor不用JSP使用Servlet来获取config.json

首先要弄清楚几个路径：
String rootPath = request.getServletContext().getRealPath("/");
response.getWriter().write(new ActionEnter(request, rootPath).exec());

response.getWriter().write(rootPath+request.getContextPath()+request.getRequestURI() );

第一个是rootPath，他指的是你的实际根目录所在路径
Mac/Linux : /usr/xxx/yourweb
Windows : c:/users/xxx/yourweb

第二个是你的请求路径request.getContextPath()，例如/admin/upload
第三个是其它

百度的UEditor获取config.json是用rootPath（绝对路径）+你的请求路径/admin/upload的上一层（代码中getParnet()了）
【代码所在ConfigManager.java搜this.parentPath = file.getParent();】

也就是上述的：
/usr/xxx/yourweb/admin/config.json

2、UEditor显示目录下所有图片（上传图片中的图片管理功能）

注意这里：
FileManager.java搜下面代码

public FileManager ( Map<String, Object> conf ) {

this.rootPath = (String)conf.get( "rootPath" );
this.dir = this.rootPath + (String)conf.get( "dir" );
this.allowFiles = this.getAllowFiles( conf.get("allowFiles") );
this.count = (Integer)conf.get( "count" );

}

ActionEnter.java搜下面代码

case ActionMap.LIST_FILE:
conf = configManager.getConfig( actionCode );
int start = this.getStartIndex();
state = new FileManager( conf ).listFile( start );
break;

configManager.java中的

case ActionMap.LIST_FILE:
conf.put( "allowFiles", this.getArray( "fileManagerAllowFiles" ) );
conf.put( "dir", this.jsonConfig.getString( "fileManagerListPath" ) );
conf.put( "count", this.jsonConfig.getInt( "fileManagerListSize" ) );
break;

config.json中的

"fileManagerListPath": "/uploads/files/", /* 指定要列出文件的目录 */

rootPath是绝对路径，
dir是由rootPath + dir（来自configManager.java中的从config.json获取的）拼接到一起的

所以按我的是

/usr/xxx/yourweb/uploads/files/

所以你得保证你的路径对应的上才能正常访问！！