KindEditor（富文本编辑器）的简单使用

1. 首先，去kindeditor官网下载我们所需要的资源

下载地址：资源下载路径

2. 然后解压资源包，把资源文件夹添加到自己的项目中去。

前台代码展示：

<script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script><script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script><script>KindEditor.create('#editor_id', {width : '100%',height: '300px',//显示图片空间按钮allowFileManager:true,// 图片空间按钮的URLfileManagerJson:'${ctx}/article/browser',//文件上传的urluploadJson:'${ctx}/article/upload',//指定后台接收的图片的名称filePostName:'aa',//回调函数afterBlur:function () {this.sync();}});</script>//页面展示kindeditor页面的地方<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

//添加、修改的模态框function openModel(oper, id) {//根据id获得一行数据var article = $("#article-table").jqGrid("getRowData",id);$("#author").empty();//下拉框$.ajax({url:'${ctx}/guru/findAll',type:'post',data: {dharma:article.guruId},success:function (data) {$("#author").append(data);}});//清空编辑器KindEditor.html("#editor_id","");//数据回显$("#article-id").val(article.id);$("#article-oper").val(oper);$("#article-title").val(article.title);//kindEditor的回显KindEditor.html("#editor_id",article.content);$("#modal").modal("show");}

后台代码展示（本地上传和图片空间的实现）：

//图片空间@RequestMapping("browser")public Map<String,Object> browser(HttpServletRequest request){//获取当前项目图片文件夹的路径File file = new File(request.getSession().getServletContext().getRealPath("view/article/image"));//文件夹中的所有文件File[] files = file.listFiles();String current_url = "http://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/view/article/image/";System.out.println(current_url);List<Object> list = new ArrayList<>();for (int i = 0; i < files.length; i++) {Map<String, Object> map = new HashMap<>();map.put("is_dir",false);map.put("has_file",false);map.put("filesize",files[i].length());map.put("is_photo",true);map.put("filetype", FilenameUtils.getExtension(files[i].getName()));map.put("filename",files[i].getName());map.put("datetime",new Date());list.add(map);}Map<String, Object> map = new HashMap<>();map.put("current_url",current_url);map.put("total_count",files.length);map.put("file_list",list);return map;}//本地上传@RequestMapping("upload")public Map<String,Object> upload(MultipartFile aa, HttpServletRequest request) throws IOException {System.out.println("aa: "+aa.getOriginalFilename());//文件上传File realPath = new File(request.getSession().getServletContext().getRealPath("view/article/image"));File file = new File(realPath,aa.getOriginalFilename());aa.transferTo(file);Map<String, Object> map = new HashMap<>();String url = "http://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/view/article/image/"+aa.getOriginalFilename();//返回 需要的返回值map.put("error",0);map.put("url",url);return map;}

实现的是这两个图片上传的按钮