百度编辑器UEditor 图片上传到资源服务器 JSP（将重新整理）

最近学习UEditor，开始的时候以为很简单，但是等到需要将图片和资源上传到资源服务器的时候发现遇到很多问题，所以现在学习总结一下，整理思路，这篇文章需要持续修改。本文基于spring框架开发

一、下载配置UEditor

1:下载UEditor 

下载地址：http://ueditor.baidu.com/website/download.html

百度编辑器有很多的版本

我们选择一款自己适用的就可以

按照流程将UEditor拷贝到我们的项目中

路径可以自己定义保存

2：将UEditor引入到页面中

在UEditor中有一个index.html页面，里面有一个样式，我们可以参展index.html内容引入

<script type="text/javascript" charset="utf-8" src="js/UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="js/UEditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="js/UEditor/lang/zh-cn/zh-cn.js"></script>

引入相关的js，我们就在jsp页面需要的位置可以插入富文本编辑器了

<div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>

我们需要写js控制UEditor

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

3：将UEditor文件中的js包的lib包下有jar包，我们需要将jar包导入到我们的项目中，可以将lib中的jar包放到WEB-INF的lib包下

在UEditor中的index.html中都要例子，可以参考

二、UEditor上传图片到服务器

1：上传到指定路径

我们需要将我们的图片上传到指定的地址，就要去配置路径。

在UEditor中有ueditor.config.js，我们需要修改里面的配置

主要配置下面三行

,imageUrl: "/controller" //图片上传提交后台对应的地址，路径固定为*/controller.*
,imagePath: "/ueditor/" //图片在服务器上的存储目录
,imageFieldName: "upload" //后台对应接收image的参数名

controller为我们上传的controller（我们的配置基于spring）

2：上传controller代码（配置类）

package com.diyvc.controller.common;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.diyvc.common.util.Uploader;

@Controller
@RequestMapping("/umeditor")
public class UploadController {
	

	@RequestMapping(value = "/upload/", method = { RequestMethod.POST })
	public void upload(HttpServletRequest request, HttpServletResponse response)
			throws Exception {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");

		Uploader up = new Uploader(request);
		up.setSavePath("upload");
		String[] fileType = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };
		up.setAllowFiles(fileType);
		up.setMaxSize(10000); // 单位KB
		up.upload();

		String callback = request.getParameter("callback");

		String result = "{\"name\":\"" + up.getFileName()
				+ "\", \"originalName\": \"" + up.getOriginalName()
				+ "\", \"size\": " + up.getSize() + ", \"state\": \""
				+ up.getState() + "\", \"type\": \"" + up.getType()
				+ "\", \"url\": \"" + up.getUrl() + "\"}";

		result = result.replaceAll("\\\\", "\\\\");

		if (callback == null) {
			response.getWriter().print(result);
		} else {
			response.getWriter().print(
					"<script>" + callback + "(" + result + ")</script>");
		}
	}

}

3：文件上传辅助类Uploader

package com.diyvc.common.util;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Random;

impor