一:我用的kindeditor版本是4.1.10 下载完成打开目录结构如下:
二:下面是工程目录也很重要,
三: 好了,准备工作已经做好了,现在就直接上代码了。 首先是页面JSP代码比较简单,,基本上就是从下载下来的插件里面有demo页面拷贝的代码稍加改动一下就好了。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% request.setCharacterEncoding("UTF-8"); String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : ""; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'addPost.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript" src="/res/js/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="${ctx }/res/textEdit/themes/default/default.css" /> <link rel="stylesheet" href="${ctx }/res/textEdit/plugins/code/prettify.css" /> <script charset="utf-8" src="${ctx }/res/textEdit/kindeditor-min.js"></script> <script charset="utf-8" src="${ctx }/res/textEdit/lang/zh_CN.js"></script> <script charset="utf-8" src="${ctx }/res/textEdit/plugins/code/prettify.js"></script> <script type="text/javascript"> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="content1"]', { cssPath : '${ctx }/res/textEdit/plugins/code/prettify.css', uploadJson : '${ctx }/test/test', fileManagerJson : '${ctx }/test/test', allowFileManager : true, //获取图片上传成功过后返回的图片地址 afterUpload: function (url) { K('#txtImgPath').val(url); }, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); document.forms['example'].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); document.forms['example'].submit(); }); }, }); prettyPrint(); }); </script> <body> <hr/> <br/><br/> <!--显示图片上传成功过后返回的图片地址 --> <p>图片地址:<input type="text" id="txtImgPath" style="width:300px;"/></p> <hr/> <form name="example" action="${ctx }/notice/addNoticetwo" method="post" enctype="multipart/form-data"> 选择咨询类型: <select name="categoryId" id="nl" style="width:155px; height:18px; border:1px solid #ccc; font-size:12px;"> <c:forEach items="${categoryList }" var="item"> <c:if test="${item.sortOrder==1 }"> <option value="${item.id }" selected="selected">${item.name }</option> </c:if> <c:if test="${item.sortOrder!=1 }"> <option value="${item.id }" >${item.name }</option> </c:if> </c:forEach> </select> <p> 上传图片或文件:<input type="file" name="fileName"/></p> <p>标题:<input type="text" name="title"/></p> <p>是否允许评论:<input type="text" name="commentsDisallowed"/></p> <p>摘要<input type="text" name="excerpt"/></p> <p> 内容:<textarea name="content1" id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea> </p> <p>来源:<input type="text" name="source"/></p> <p>是否已发布: 是:<input type="radio" name="published" value="0" /> 否:<input type="radio" name="published" value="1" /></p> <p><input type="submit" value="走着!!"/></p> </form> </body> <%! private String htmlspecialchars(String str) { str = str.replaceAll("&", "&"); str = str.replaceAll("<", "<"); str = str.replaceAll(">", ">"); str = str.replaceAll("\"", """); return str; } %> </html>
下面是此文本编译器的页面展示:
下面是Action后台代码:
//注意: @RequestParam("imgFile") MultipartFile idimg 这里面的imgFile 是kindeditor 上传图片的默认名
@RequestMapping(value="/test/test",method=RequestMethod.POST) public void test(@RequestParam("imgFile") MultipartFile idimg,HttpServletResponse response,HttpServletRequest request) throws IOException{ //ajax 请求处理中文乱码 request.setCharacterEncoding("gb2312"); response.setContentType("text/html;charset=utf-8"); //获取系统的临时路径 C:\Users\admin\AppData\Local\Temp\ String temporaryPath= System.getProperty("java.io.tmpdir"); //获取文件名字 如 :123.JPG String fileName=idimg.getOriginalFilename(); //获取内容 String content=request.getParameter("content1"); // 转存文件 //transferTo(): 次方方为springMVC框架 保存图片的方法 idimg.transferTo(new File(temporaryPath + fileName)); //现在既然已经将文件写入到了文件夹, 接下来就是把文件的地址存到数据库了,这个我代码没有写, // temporaryPath + fileName 就是写入文件的全路径 // 代码省略 。。。。。。 //返回ajax内容 PrintWriter pw = response.getWriter(); String img="http://www.baidu.com/img/bd_logo1.png"; //这是一个图片的地址我随便找了一个写死的 只为测试 //下面这行代码才是让我发疯的地方,这个地方返回的事一个json串,之前这个串里的参数我不知道写什么, //试了好多次好多种都不行,最主要的是不知道是不是这里的错,纠结了好久,最后在一位同行的代码中找到了这 //行代码,拷贝过来就可以了,让我纠结一天不知道哪里出错的地方原来就是这一行代码。。。。。 pw.write("{\"error\":0,\"url\":\"" +img+"\"}"); }
如上这样写的编译器有个致命的弱点,就是返回的图片URL 必须是网络上服务器上的到页面才可以展示, 要是拿的本地图片是展示不出来的,
还有上传多张图片,百度地图等功能还没有写,,哎,,希望得到哪位大神指点吧!