coding++：快速构建 kindeditor 富文本编辑器（一）
此案例 demo 为 SpringBoot 开发
1、官网下载相关资源包：http://kindeditor.net/down.php
2、编写页面（引入相关JS）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>kindeditor富文本编辑器</title> <link href="/kindeditor-4-1-10/themes/default/default.css" type="text/css" rel="stylesheet"> <script type="text/javascript" charset="utf-8" src="/jquery-3.2.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/kindeditor-all-min.js"></script> <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/lang/zh_CN.js"></script> <script type="text/javascript" charset="utf-8" src="/kindeditor-Own/kindeditor.js"></script> </head> <body> <textarea id="itemAddForm" style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea> </body> </html>
3、编写 JS（/kindeditor-Own/kindeditor.js） 创建实例
var itemAddEditor; //页面初始化完毕后执行此方法 $(function () { var TT = TTO = { // 编辑器参数 kingEditorParams: { //指定上传文件参数名称 filePostName: "uploadFile", //指定上传文件请求的url。 uploadJson: '/pic/upload', //上传类型，分别为image、flash、media、file dir: "image" }, createEditor: function (select) { return KindEditor.create(select, TT.kingEditorParams); } }; //创建富文本编辑器 itemAddEditor = TTO.createEditor("#itemAddForm"); });
4、编写后台 配置虚拟路径（MyWebAppConfiguration）
package com.editors.kindeditor.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class MyWebAppConfiguration extends WebMvcConfigurerAdapter { /** * 添加一些虚拟路径的映射 * 静态资源路径和上传文件的路径 * * @param registry */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { /** * @Description: 对文件的路径进行配置, 创建一个虚拟路径/Path/** ，即只要在< img src="/Path/picName.jpg" />便可以直接引用图片 *这是图片的物理路径 "file:/+本地图片的地址" */ registry.addResourceHandler("/Path/**").addResourceLocations("file:/C:/Users/lenovo/AppData/Local/Temp/tomcat-docbase.2975979620477460781.8080/upload/"); super.addResourceHandlers(registry); } }
5、图片上传服务
package com.editors.kindeditor.controller; import com.editors.utils.JsonUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.*; import java.util.HashMap; import java.util.Map; @Controller public class KindeditorController { @RequestMapping("/kindeditor") public String kindeditor() { return "kindeditor/kindeditor"; } /** * 返回 复杂类型 容易产生浏览器兼容性问题 * 原因： * 跟 @ResponseBody 默认行为有关 * String类型可直接打回页面，而复杂类型无法直接打回，需要先转换为json */ @RequestMapping("/pic/upload") @ResponseBody public String picUpload(MultipartFile uploadFile, HttpServletRequest request) { Map map = new HashMap<>(); if (!uploadFile.isEmpty()) { String saveFileName = uploadFile.getOriginalFilename(); File saveFile = new File(request.getSession().getServletContext().getRealPath("/upload/") + saveFileName); if (!saveFile.getParentFile().exists()) { saveFile.getParentFile().mkdirs(); } String path = "/Path/" + saveFileName; System.out.println("path={" + path + "}"); try { BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile)); out.write(uploadFile.getBytes()); out.flush(); out.close(); map.put("error", 0); map.put("url", path); } catch (Exception e) { e.printStackTrace(); map.put("error", 1); map.put("url", path); return "上传失败," + e.getMessage(); } } else { map.put("error", 1); map.put("url", "上传失败，因为文件为空."); } return JsonUtils.objectToJson(map); } }
6、执行效果：
