您的位置：首页 > 编程语言 > Java开发

二：HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现

2015-08-24 14:03 615 查看

这和一篇与上一篇的区别在与，上一篇是直接请求到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 项目下对应的文件里

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航