ueditor 编辑器，自定义图片上传及图片显示

一、下载ueditor编辑器，引入下列js库

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/ueditor/ueditor.config.js"></script>

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/ueditor/ueditor.all.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/ueditor/lang/zh-cn/zh-cn.js"></script>

二、写页面

<div>
    <h1>完整demo</h1>
    <form method="post" name="form">
    <div id="editor" name="content"  style="width:800px;height:500px"></div>
   
      <div id="editor2" name="content"  style="width:800px;height:500px"></div>
       
    </form>
</div>
<div><input type="button" value="提交" οnclick="t()"></input></div>

三、创建ue对象实例
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{
        toolbars: [
                   ['source','subscript','superscript', 'undo', 'redo', 'bold', 'snapscreen','preview', 'simpleupload','insertimage', 'emotion', 
                    'spechars',   'drafts' , 'time','date']
               ],
               autoHeightEnabled: true,
               autoFloatEnabled: true,
               imageActionName:'testUpload'//定义上传的action名称
           });

    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'testUpload') {//跳转到后来的上传action
            return '${pageContext.request.contextPath}/testEditor/testUpload.action';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
    
 
    function t(){
        form.action="${pageContext.request.contextPath }/testEditor/testForm.action";
        form.submit();
        }


</script> 

四、编写后台java代码

	注：@RequestParam(value = "upfile", required = false)要和ueditor.config.js中的 imageFieldName:"upfile"定义的名称一致

        @RequestMapping(value="testUpload"+ISystemConstant.SUFFIX_ACTION,method=RequestMethod.POST)
	@ResponseBody
	public Map<String,Object> testUpload(Model model,@RequestParam(value = "upfile", required = false) MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws Exception{
		

		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		Map<String,Object> result=new HashMap<String,Object>();//
		String fileName = file.getOriginalFilename();
		String filePath=pubParamService.getRootPath()+File.separator;
		  File targetFile = new File(filePath, fileName);
		    if(!targetFile.exists()){  
	            targetFile.mkdirs();  
	        }  
	        try {  
	            file.transferTo(targetFile);  
	        } catch (Exception e) {  
	            e.printStackTrace();  
	        }  
	        result.put("name", file.getOriginalFilename());//新的文件名
	        result.put("originalName", file.getOriginalFilename());//原始文件名
	        result.put("size", file.getSize());
	        result.put("state", "SUCCESS");
	        result.put("url", request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/testEditor/testShowImg.action?path="+fileName);//展示图片的请求url
		return result;
		
	}
	
	
	/**
	 * 显示图片
	 * @param request
	 * @return
	 * @throws Exception 
	 */
	@RequestMapping(value = "testShowImg"+ISystemConstant.SUFFIX_ACTION)
	public void testShowImg(Model model,@RequestParam String path, HttpServletRequest request,HttpServletResponse response) throws Exception {
		String relaPath = path;
		
		if(!StringHelper.isEmpty(relaPath)){
			//构造完整的图片路径
			String rootPath;
			rootPath = pubParamService.getRootPath();
			String fullImagePath;			
			fullImagePath = rootPath+relaPath;		
		    getImageShowService().show(fullImagePath, response);
		}
	}