前言：关于kindEditor的下载我就不多说了，官网下载地址：http://kindeditor.net/down.php
关于kindEditor编辑器的使用，官网参考手册地址：http://kindeditor.net/doc.php
接下来进入正题，使用KindEditor传送数据到后台和上传图片到后台！
正题一，上传数据到后台，所谓的数据就是用户输入的内容：
正题二，上传图片到后台！
大家首先需要明白的是图片和文本内容并不是请求的同一个路径，所以我后面写了两个处理的请求路径！一个处理文本内容一个处理图片
第一步：
引入KindEditor所需要的依赖js与css等等！我这里引入的路径是根据我自己的路径设置的，大家根据自己的路径位置将其引入即可！我这里有引入了jquery是为了方便之后测试！
<!-- 引入kindeditor -->
<link rel="stylesheet"
href="/项目名/kindeditor-4.1.10/themes/default/default.css" />
<script charset="utf-8"
src="/项目名/kindeditor-4.1.10/kindeditor-min.js"></script>
<!-- 引入jquery -->
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>第二步：写一个form表单用来提交数据，其中包含一个textarea，用来装载kindEditor组件
<body>
<form action="/项目名/submitForm" method="post">
<textarea name="content" id="editor_id"
style="width: 800px; height: 400px; visibility: hidden;">请输入你的内容</textarea>
<button type="submit">提交</button>>
</form>
</body>第三步：为你写的rextarea增加kindEditor的样式
<script>
//初始化图片上传组件
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
uploadJson : '/kindeditor/uploadImg',// 上传图片接口
filePostName: 'imgFile'// name属性默认值
// 同步数据后可以直接取得textarea的value
editor.sync();
});
});
</script>第四步：处理请求
| 第一个请求 /uploadImg | 处理的是图片上传的，所以这里使用的是spingmvc整合的commons-fileupload组件，自己的后台就会拿到图片的流，之后就可以根据自己的业务需求处理即可！ |
| 第二个请求 /submitForm | 处理的是表单数据，其中只有文本，没有图片 |
| 在请求上传图片时，无论是否成功，因该给请求返回一个jsoN数据，关于返回数据的json格式要求： 官方文档：http://kindeditor.net/docs/upload.html 即在result中的三个属性 private Integer error;// 0成功 1失败 |
| 这里使用的是spingmvc整合的commons-fileupload组件，引入如下： <dependency> 再在spingmvc的配置文件中配置 <!-- 配置多媒体解析器(apache的文件上传组件) --> |
/**
* 处理图片的请求
* @param imgFile
* @return
* @throws IOException
*/
@RequestMapping("/uploadImg")
@ResponseBody
public Result uploadImg(@RequestParam("imgFile") MultipartFile imgFile) throws IOException {
Result result = new Result();
try {
//获得上传图片的字节流，输出到自己的本地的某个位置
FileOutputStream opt = new FileOutputStream(new
File("C:/Users/xiaomi/Desktop/img/1.jpg"));
IOUtils.write(imgFile.getBytes(),opt);
//没有异常
result.setError(0);
result.setUrl("https://www.baidu.com/img/bd_logo1.png?where=super");
}catch(Exception e) {
//有异常
System.out.println(e);
result.setError(1);
result.setMessage("上传失败");
}
return result;
}
/**
* 处理文本数据的请求（即表单数据，但不包括图片）
* @param content
* @return
*/
@RequestMapping("/submitForm")
public String uploadForm(String content) {
System.out.println(content);
return "ok";
}
大家可以把图片放到nginx服务器中，在回显一个图片路径，那就完美了！（但是我还不会传到linux下的nginx下，难受.jpg！所以到这里就结束吧！摊手.jpg）