二:HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现
这和一篇与上一篇的区别在与,上一篇是直接请求到action我们剩下的都是我们全部手动处理,
而这一片篇是由kindeditor内部处理,图片上传到本地,基本上没什么区别,但是有一点一定要注意的就是,这里面在jsp下有一个lib目录,里面有三个jar文件,一定要将这个三个jar文件考培到tomcat的lib目录下。
首先还是先看下目录吧
下面还有修改一下jsp目录下的 file_manager_json.jsp和upload_json.jsp文件 红色圈出的部分,,如下
下面是JSP 代码 :
<%@ 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+"/"; %> <!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="${ctx }/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) { editor = K.create('textarea[name="content"]', { uploadJson : '${ctx }/res/textEdit/jsp/upload_json.jsp',//上传 fileManagerJson : '${ctx }/res/textEdit/jsp/file_manager_json.jsp',//文件管理 allowFileManager : true, allowImageUpload : true, autoHeightMode : true, afterCreate : function() {this.loadPlugin('autoheight');}, afterBlur : function(){ this.sync(); }, //Kindeditor下获取文本框 //获取图片上传成功过后返回的图片地址 afterUpload: function (url) { var valcontent = $("#txtImgPath").val(); //获取 valcontent=valcontent+","+url; K('#txtImgPath').val(valcontent); //将图片放入文本框 }, }); }); </script> <body> <hr/> <br/><br/> <form name="example" action="${ctx }/post/addPost" 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> <!-- 图片URL --> <input type="hidden" id="txtImgPath" name="textImgPath" /> <p>标题:<input type="text" name="title"/></p> <p>是否允许评论:<input type="text" name="commentsDisallowed"/></p> <p>摘要<input type="text" name="excerpt"/></p> <p> 内容:<textarea name="content" id="content" 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 id="login" 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>
好了 此时已经全部完成了图片上传功能,上传到本地tomcat 项目下对应的文件里