SpringBoot 配置富文本编辑器 xheditor
一年前写过一篇：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 是异步上传图片的方法（下点会讲）
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta name="keywords" content="keyword1,keyword2,keyword3">meta>
<meta name="description" content="this is my page">meta>
<meta name="content-type" content="text/html; charset=UTF-8">meta>
<title>博客title>
<link rel="stylesheet" href="xheditor/common.css" type="text/css" media="screen" />
<script type="text/javascript" src="xheditor/jquery/jquery-1.4.4.min.js">script>
<script type="text/javascript" src="xheditor/xheditor-1.1.14-zh-cn.min.js">script>
<script type="text/javascript">
$(pageInit);
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>
<body>
<textarea id="elm1" name="essaycontent" rows="40" cols="80" style="width: 80%">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=100Mb6).测试
7).如果发生了错误，看看controller中 String msg = “/imgupload/” + newFileName; 有没有写全，有没有设置文件大小等等。
8).祝大家成功！