KindEditor结合ssm框架使用

介绍

最近项目中要用的文件上传的组件与富文本编辑器的使用。一直用的富文本编辑器是金山的KindEditor和百度的Ueditor。之前没有负责处理上传的业务逻辑，只是用的kindEditor的默认uploadjson.jsp.由于业务的变动。需要自己手动处理一下上传的服务端。废话不多说，今天先来介绍一下KindEditor的使用。之后会把Ueditor使用补上。

使用kindEditor的好处

srping-mvc给我们提供了文件上传的api，如果一个项目中只有一个文件上传的模块，参考spring-mvc 官方文档，可以在原始的from 标签中完成文档上传。但如果多个模块中都有文件上传的需要的话，每次都要负责处理文件上传的业务。程序显得臃肿，并且代码得不到重用。使用editor的思路是：使用前端js完成异步文件上传。等到文件上传结束后，将文件的保存路径利用json的格式输出到前端页面。前端将表单提交即可。

程序演示

首先访问文件上传的页面：http://localhost:8080/upload/uploadFile.jsp
界面如下：

点击文件上传按钮，弹出文件选择框。

点击上传后，开始上传文件。当文件上传完成后，会将文件的保存路径显示到文本框中。效果如下：

最后将该表单提交即可。如此便完成了表单提交与文件上传业务的代码隔离。

环境介绍
首先用kindeditor的官网中下载最新版的kindeditor版本，解压，导出到项目中去。在这里我将kindeditor进行了精简。如下图：

jsp界面代码如下：

文件上传后台代码：

@RequestMapping(value = "/uploadController", produces = { "application/json;charset=UTF-8" })
    @ResponseBody
    public Map upload(@RequestParam("file") MultipartFile file) {

        // 获取文件原始名称 :如：DSC_0058.JPG
        String originalFilename = file.getOriginalFilename();
        /**
         * 在这里可以负责处理文件上传的逻辑 如：为文件重命名，写到自定义的路径或者上传到ftp服务器等。 处理完文件上传后要通知前台上传的结果
         * 成功时json串： { "error" : 0, "url" : "http://www.example.com/path/to/file.ext"}
         * 失败时json串： { "error" : 1, "message" : "错误信息" }
         * 這裡我用map封裝了一下如下
         */
        Map result = new HashMap<>();
        result.put("error", 0);
        result.put("message", "上传成功");
        result.put("url", "/upload/kindeditor/editor.gif");
        return result;
    }

至此，文件单文件上传完成。

富文本编辑器的使用

运行效果如下：

前台界面：http://localhost:8080/upload/kindeditor.jsp

涉及到文件上传的有：

从左到右依次为：单文件上传，多文件上传，flash上传，视频上传，文件上传等。 利用此插件，以及我们刚才的后台代码。可以把所有文件上传的业务交给一个controller来空中。做到一次编写，多次使用。

运行效果如下（显示多图片上传）

文件选择：

点击上传：

结果：

由于后台我们没有处理真正的业务上传逻辑，所以本次范围的是一个静态页面：

    result.put("url", "/upload/kindeditor/editor.gif");

也就说 无论上传什么，返回的都是同一张图片 哈哈。

下面粘上前台代码：

        
        
        
        



<strong>HTML内容</strong>

参考链接：http://kindeditor.net/doc.php