二:HTML文本编译器 kindeditor-4.1.10 的使用 SpringMVC+jsp的实现
2024-08-27 07:20:33
这和一篇与上一篇的区别在与,上一篇是直接请求到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 项目下对应的文件里
最新文章
- REDHAT一总复习1 禁用颜色
- 3d游戏模型及地形提取及导航
- reactiveCocoa
- 使linux服务器默认使用中文字符集zh_CN.UTF-8
- Apache—DBUtils框架
- Mongodb的索引--学习笔记(未完)
- Java Observable 模式
- SVN-钩子
- 通过自关联替代开窗函数实现SQL优化
- jQuery UI 之 LigerUI 快速入门
- MSSQL存储过程接收另一个存储过程返回列表
- 201521123091 《Java程序设计》第6周学习总结
- java 之 原型模式(大话设计模式)
- 关于运行springboot时报Unregistering JMX-exposed beans on shutdown的解决方案
- 《从Paxos到Zookeeper:分布式一致性原理与实践》第一章读书笔记
- iOS 10 应用内跳转到系统设置
- spark任务提交流程
- C - Monthly Expense
- Rx编程的第一步是将native对象转换为monad对象
- replace()的使用方法