spring-boot整合kindeditor

spring-boot整合kindeditor

最近在使用spring-boot制作一个简单的小网站。spring-boot以代码注解的形式嵌入springMVC的配置，简化了配置流程。开发过程使用的页面模板是thymeleaf。下面简要说一下整合kindeditor的过程中遇到的问题以及自己的解决方法：

页面代码结构如下：



其中kindeditor文件夹存放kindeditor的所有文件，kindeditor版本是4.1.10。

引用kindeditor

在页面中使用最简单的方式使用kindeditor。

<form method="post" action="/blogs/add" role="form"
class="form-horizontal">
<div class="form-group">

<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="title" name="title"
placeholder="请输入标题" />
</div>
</div>
<div class="form-group">

<div class="col-sm-offset-1 col-sm-10">
<textarea id="editor" name="content">
从这里开始记录我的美好时光
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<button type="submit" class="btn btn-default">保存</button>
</div>
</div>
</form>
<script charset="utf-8" src="/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor');
});
</script>

运行程序，可以看到kindeditor界面，尝试着写点东西，也能保存成功。接下来点击上传图片按钮，上传一张小图片，提交的时候报错，/kindeditor/php/upload_json.php找不到。

配置上传参数

看官方文档，原来还需要在kindeditor初始化的时候设置两个参数，uploadJson和fileManagerJson，java版本的官方提供了两个jsp，如下所示：

<script>
KindEditor.ready(function(K) {
window.editor=K.create('#editor', {
uploadJson : '/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true
});
});
</script>

再运行一次，上传还是报错，Chrome浏览器中Console可以看到http://localhost:8080/kindeditor/jsp/upload_json.jsp?dir=image Failed to load resource: the server responded with a status of 404 (OK)。怎么会呢，upload_json.jsp明明就在那个文件夹下。

接着浏览器直接访问该文件，却能直接看到jsp页面源码，而不是编译过后的html。

将jsp改成controller

原来是spring-boot在使用thymeleaf作为页面模板时，会将jsp直接看成静态文件。

现在有两种方法来解决这个问题，要么让spring-boot能够解析jsp，要么将jsp中的代码放到controller中实现。这里使用第二种方法。

新建一个UploadController类，将upload_json.jsp和file_manager_json.jsp内容整合到UploadController里。这里参考了网上的经验SpringMVC整合KindEditor上传文件的处理。

我将上传和文件管理的链接分别改成/fileUpload和/fileManager。

与此同时，将kindeditor初始化的js脚本也更新一下。

<script>
KindEditor.ready(function(K) {
window.editor=K.create('#editor', {
uploadJson : '/fileUpload',
fileManagerJson : '/fileManager',
allowFileManager : true
});
});
</script>

再测试一次！

依然不行，单步调试发现，以下代码处没有获取到上传的文件：

FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);

修改上传代码

继续百度，得知spring有自己的一套上传功能，于是再次改动代码，这次主要用到了MultipartHttpServletRequest这个类。

upload方法及参数：

@RequestMapping(value = "fileUpload", method = RequestMethod.POST)
public void fileUpload(MultipartHttpServletRequest  request,
HttpServletResponse response) throws ServletException, IOException,
FileUploadException {

获取文件列表，遍历文件列表：

List<MultipartFile> files = request.getFiles("imgFile");

Iterator<MultipartFile> itr = files.iterator();
while (itr.hasNext()) {
MultipartFile item = itr.next();
String fileName = item.getOriginalFilename();

再次测试，图片终于上传成功了！

附上UploadController.java