一年前写过一篇：struts2 配置 xheditor 的文章。那时候还在用ssh，现在开始用spring boot。本来想配置CSDN的markdown编辑器的，可惜在github上找不到。所以，还是用回轻巧的xheditor吧。

环境要求：Spring Boot v1.5.1.RELEASE、jdk1.7、myeclipse2015 、xheditor1.1.14

xheditoe的官网好像下不了，我把xheditor1.1.14的压缩包上传到资源那里了，点击进入xheditor1.1.14的下载页

下面是配置过程：

1).解压xheditor，在static目录下新建一个xheditor目录，将解压的文件通通放进去

2).在 templates 下新建一个html页面：blog.html

这里要注意两点：

<1> pageInit()里面的配置：html5Upload:false ，一定要设置为false，不然无法上传图片；

<2> upImgUrl:”/uploadimg” 的 /uploadimg 是异步上传图片的方法(下点会讲)

meta>

meta>

meta>

博客title>

function pageInit()

{

$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});

$('#elm1').xheditor({tools:'full',skin:'default',internalScript:false,

html5Upload:false, upImgUrl:"/uploadimg",upImgExt:"jpg,jpeg,gif,png"});

}

function submitForm(){$('#frmDemo').submit();}script>

head>

textarea>

body>

html>

3).xheditor 的图片上传是异步的，即先把图片上传到服务器，服务器返回图片的路径回显。所以要专门写一个 controller 来处理图片上传，为了不和业务逻辑混淆，把这个专门处理图片上传的 controller 写在工具包中。有一点需要注意，返回给 xheditor 的message(json格式)中，有个 msg 的参数，xheditor 根据 msg 定位图片的路径，也就是说 msg 表示的是刚刚上传的图片存放的路径，文件名和路径要完整！比如：String msg = “/imgupload/” + newFileName; /imgupload/ 是存放图片的文件夹，newFileName 是UUID 改动过的文件名字。

package com.hsp.util;

import java.io.File;

import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

@Controller

public class XheditorImgUpload {

@RequestMapping(value = "/uploadimg", method=RequestMethod.POST)

public @ResponseBody String imgUpload(HttpServletRequest request,

@RequestParam MultipartFile filedata) {

//System.out.println("filedata --> " + filedata);

String filedataFileName = filedata.getOriginalFilename();

//System.out.println("filedataFileName --> " + filedataFileName);

String path = request.getSession().getServletContext().getRealPath("imgupload/");

//UUID改文件名，避免文件名重复

String newFileName=UUID.randomUUID().toString()+filedataFileName.substring(filedataFileName.indexOf("."),filedataFileName.length());

String message;

String err = "";

String msg = "/imgupload/" + newFileName;

//System.out.println("msg--->" + msg);

try {

FileUtil.uploadFile(filedata.getBytes(), path, newFileName);

} catch (Exception e) {

//err = e.getMessage();

}

message = "{\"err\":\"" + err + "\",\"msg\":\"" + msg

+ "\"}";

err = message;

return message;

}

}

4).上传文件的实现方法：FileUtil.uploadFile(…)

public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {

File targetFile = new File(filePath);

if(!targetFile.exists()){

targetFile.mkdirs();

}

FileOutputStream out = new FileOutputStream(filePath+fileName);

out.write(file);

out.flush();

out.close();

}

5).设置文件上传的最大限制，在 application.properties 里面加：

spring.http.multipart.maxFileSize=100Mb

spring.http.multipart.maxRequestSize=100Mb

6).测试

7).如果发生了错误，看看controller中 String msg = “/imgupload/” + newFileName; 有没有写全，有没有设置文件大小等等。

8).祝大家成功！