thymeleaf + ueditor实现图片上传和回显

1，下载ueditor放到项目中，导入相关jar包，commons-io框架有就没导入

<dependency>
	    <groupId>com.gitee.qdbp.thirdparty</groupId>
	    <artifactId>ueditor</artifactId>
	    <version>1.4.3.3</version>
	</dependency>
	<dependency>
	    <groupId>org.json</groupId>
	    <artifactId>json</artifactId>
	    <version>20180813</version>
	</dependency>
    <dependency>
        <groupId>commons-codec</groupId>
        <artifactId>commons-codec</artifactId>
        <version>1.9</version>
    </dependency>
	<dependency>
		<groupId>commons-fileupload</groupId>
		<artifactId>commons-fileupload</artifactId>
		<version>1.3.2</version>
	</dependency>

2，ueditor/jsp下有两个重要文件controller.jsp和config.json，controller.jsp作用是把config.json返回给ueditor，因为我们用的是thymeleaf所有是没法用的。所有我们要自己写一个UeditorController类来代替controller.jsp。
2.1：修改ueditor/ueditor.config.js

, serverUrl: "ueditor/configJson"

2.2：把config.json放到resources目录下
2.3：自定义UeditorController类，返回config.json

@RequestMapping(value="/ueditor/configJson")  
	@ResponseBody
    public String config(HttpServletRequest request, HttpServletResponse response){  
        response.setContentType("application/json");
        StringBuilder sb = new StringBuilder();
        String line;
        //获取config.json路径
        Resource resource = new ClassPathResource("config.json");
        
        try(BufferedReader bf = new BufferedReader(new FileReader(resource.getFile()));) {
			while((line=bf.readLine()) != null) {
				sb.append(line);
			}
		} catch (IOException e) {
			e.printStackTrace();
			return "error";
		}
        return sb.toString();
    } 

3，自定义请求地址，可以参考官方文档的5.3

uploadimage：//执行上传图片或截图的action名称
uploadscrawl：//执行上传涂鸦的action名称
uploadvideo：//执行上传视频的action名称
uploadfile：//controller里,执行上传视频的action名称
catchimage：//执行抓取远程图片的action名称
listimage：//执行列出图片的action名称
listfile：//执行列出文件的action名称

3.1:在实例化ueditor编辑器的页面添加如下代码

var base_dir = "[[@{/}]]";
UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage') {
            return base_dir+'ueditor/uploadImage';//这里写自己的路径如： localhost:8080:/myapp/ueditor/uploadImage
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

3.2:实现图片上传，可以参考官方文档3.3

//请求参数
GET {"action": "uploadimage"}
POST "upfile": File Data

//返回值
{
    "state": "SUCCESS",
    "url": "upload/demo.jpg",
    "title": "demo.jpg",
    "original": "demo.jpg"
}

有了请求参数和返回值我们可以自己实现
UeditorController类下

@RequestMapping("/ueditor/uploadImage")
	@ResponseBody
	public UeditorUploadResult uploadImage(MultipartFile upfile) {
		//获取上传图片的原名
		String oldName = upfile.getOriginalFilename();
		//避免重复重新取名
		String newName = new Date().getTime() + oldName;
		String path = "E:\\udUpdate\\" + newName;
		System.out.println(path);
		try {
			upfile.transferTo(new File(path));//保存到硬盘
		} catch (IllegalStateException | IOException e) {
			// 我偷懒返回null了
			e.printStackTrace();
			return null;
		}
		//设置返回值
		UeditorUploadResult result = new UeditorUploadResult();//这个是自定义返回参数类
		//图片保存到硬盘path，访问路径是url
		result.setUrl("/pic/" + newName);//这里是图片服务器的地址url，相当于localhost:8080/boboblog/pic + newName
		result.setTitle(newName);
		result.setOriginal(oldName);
		result.setState("SUCCESS");
		return  result;
	}

直接保存到硬盘没法回显，所以我直接用的是一个简单图片服务器，
小萌新第一次写这么长o(￣︶￣)o