简单使用KindEditor传送数据到后台和上传图片到后台，

前言：关于kindEditor的下载我就不多说了，官网下载地址：http://kindeditor.net/down.php

关于kindEditor编辑器的使用，官网参考手册地址：http://kindeditor.net/doc.php

 

---

接下来进入正题，使用KindEditor传送数据到后台和上传图片到后台！

正题一，上传数据到后台，所谓的数据就是用户输入的内容：

正题二，上传图片到后台！

大家首先需要明白的是图片和文本内容并不是请求的同一个路径，所以我后面写了两个处理的请求路径！一个处理文本内容一个处理图片

---

第一步：

引入KindEditor所需要的依赖js与css等等！我这里引入的路径是根据我自己的路径设置的，大家根据自己的路径位置将其引入即可！我这里有引入了jquery是为了方便之后测试！

第二步：写一个form表单用来提交数据，其中包含一个textarea，用来装载kindEditor组件 

	

		请输入你的内容
		
            提交>	
	
	

第三步：为你写的rextarea增加kindEditor的样式

第四步：处理请求

两个请求的说明

第一个请求  /uploadImg	处理的是图片上传的，所以这里使用的是spingmvc整合的commons-fileupload组件，自己的后台就会拿到图片的流，之后就可以根据自己的业务需求处理即可！
第二个请求  /submitForm	处理的是表单数据，其中只有文本，没有图片

 

关于result类的说明

在请求上传图片时，无论是否成功，因该给请求返回一个jsoN数据，关于返回数据的json格式要求： 官方文档：http://kindeditor.net/docs/upload.html //成功时 { "error" : 0, "url" : "http://www.example.com/path/to/file.ext"//用于回显（nginx） } //失败时 { "error" : 1, "message" : "错误信息" }     即在result中的三个属性     private Integer error;// 0成功 1失败     private String url;// 上传成功时路径     private String message;// 上传失败时信息

关于文件上传组件MultipartFile说明

这里使用的是spingmvc整合的commons-fileupload组件，引入如下：             commons-fileupload             commons-fileupload             1.3.1       再在spingmvc的配置文件中配置              class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

 

	/**
	 * 处理图片的请求
	 * @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）