使用ueditor实现单独的图片上传功能

从网上找到的一种方法，代码如下：

/*
 * 配置：
 * 1. 修改ueditor.config.js 中的路径
 * 2. 添加ueditor.jar 和commons-fileupload-1.2.2.jar 到lib更好
 * 3. 如果为strut2集成，则需要添加过滤器继承原有的过滤器，对imageUp.jsp进行过滤
 * 4. 如果单独使用工具类，则建议使用script的方式，不要使用input
 * 	  如下：
 *  <input id="upload" type="text" value=""/>
	<script id="myeditor"></script>
	<span  id="image">ddd</span>
	 单独使用时，不用渲染，获取editor即可。否则在ie会出问题。
   5. 如果只需要渲染，则直接调用render方法即可。
 * UEditor单独图片上传工具类
 */
//(function($){
	// 单张图片
	var image = {
		editor:null,
		init:function(editorid,keyid){
			var _editor =this.getEditor(editorid);
			_editor.ready(function () {
			    _editor.setDisabled();
			    _editor.hide();
			  <span style="font-size:18px;color:#000099;"><strong>  _editor.addListener('beforeInsertImage', function (t, args) {
			    	if(typeof keyid == 'string')
			    		$("#"+keyid).attr("src", args[0].src);
			    	else{
			    		var _img = $(keyid).parent().find('img');
			    		$(_img).attr("src", args[0].src);
			    		$(keyid).parent().find('textarea').val(args[0].title);
			    	}
			    });</strong></span>
			});
		},
		getEditor:function(editorid){
			this.editor = UE.getEditor(editorid);
			return this.editor;
		},
		show:function(id){
			var _editor = this.editor;
           //注意这里只需要获取编辑器，无需渲染，如果强行渲染，在IE下可能会不兼容（切记）
           //和网上一些朋友的代码不同之处就在这里
		        <span style="font-size:24px;color:#ff0000;"><strong>var image = _editor.getDialog("insertimage");</strong></span>
			 $("#"+id).click(function(){
				image.render();
				image.open();
			 });
		},
		render:function(editorid){
			var _editor = this.getEditor(editorid);
			_editor.render();
		}
	};
	
	// 多张图片
	var imageArray = {
		editor:null,
		init:function(editorid,keyid){
			var _editor =this.getEditor(editorid);
			_editor.ready(function () {
			    _editor.setDisabled();
			    _editor.hide();
			    _editor.addListener('beforeInsertImage', function (t, args) {
			    	$('#mainContent_img_div').find('div').remove();
					for(i = 0; i < args.length; i++)
						$('#mainContent_img_div').append("<div><img id='changeImg_img"+i+"' src='"+args[i].src+"' width='100px' height='100px' /><textarea rows='3' cols='30' >"+args[i].title+"</textarea><script id='changeImg_ed"+i+"'></script><input type='button' id='changeImg"+i+"' value='更换此图片' /></div>");
					// 添加图片后，增加修改功能
					var divs = $('#mainContent_img_div').find('div');
					//console.info(divs);
					for(i = 0; i < divs.length; i++){
						var imgId = $(divs[i]).children('img').attr('id');
						var scriptId = $(divs[i]).children('script').attr('id');
						var btnId = $(divs[i]).children('input').attr('id');
						/*console.info("imgId:"+imgId);
						console.info("scriptId:"+scriptId);
						console.info("btnId:"+btnId);*/
						image.init(scriptId, $(divs[i]).children('input'));
				        image.show(btnId);
					}
			    });
			});
		},
		getEditor:function(editorid){
			this.editor = UE.getEditor(editorid);
			return this.editor;
		},
		show:function(id){
			var _editor = this.editor;
           //注意这里只需要获取编辑器，无需渲染，如果强行渲染，在IE下可能会不兼容（切记）
           //和网上一些朋友的代码不同之处就在这里
			$("#"+id).click(function(){
				var image = _editor.getDialog("insertimage");
				image.render();
				image.open();
			});
		},
		render:function(editorid){
			var _editor = this.getEditor(editorid);
			_editor.render();
		}
	};
//})(jQuery);

但是运行之后发现

var image = _editor.getDialog("insertimage");

的image对象获取的是undefined，导致页面会报错，导致打不开图片上传页面，也就是说 _editor.getDialog("insertimage")里的insertimage找不到，纠结了好一会之后发现ueditor.config.js里有个toolbars对象配置里没有这个对象，加上之后可以打开图片上传页面了，如下：

页面打开如下图：

但是当选择一张图片后点击确定发现并没有执行

_editor.addListener('beforeInsertImage',...

，原因是没有给图片加上beforeInsertImage事件，找到image.js文件的 下面两行代码，在两行代码前加上

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

在两行代码前加上 editor.fireEvent('beforeInsertImage', list);

齐活！