Kindeditor环境搭建(JSP)

最新推荐文章于 2017-12-07 15:53:00 发布

天涯在身边

最新推荐文章于 2017-12-07 15:53:00 发布

阅读量131

点赞数

分类专栏： JSP html 文章标签： JSP json PHP HTML Servlet

本文链接：https://blog.csdn.net/liuzidong_liuzidong/article/details/83853936

版权

JSP 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

一环境: XP3+Myeclipse6.6+Tomcat7
二官网:[url]http://www.kindsoft.net/[/url]
需要的jar文件如下 :
[img]http://dl.iteye.com/upload/attachment/433917/5ec24a8a-ba83-323d-bfa4-bcd08901c1b1.jpg[/img]
三参考资料
1 可视化编辑器的开发心得
[url]http://www.iteye.com/topic/552177[/url]
2 KindEditor使用
[url]http://jonney-82.iteye.com/blog/447579[/url]
3 kindeditor错误“服务器发生故障”解决的办法！
[url]http://www.webqi.cn/news/news179.html[/url]
4 基于kindeditor3.4的上传功能的JAVA实现
[url]http://www.iteye.com/topic/599971[/url]
四具体代码:版本:Kindeditor3.5
1 参考(kindeditor错误“服务器发生故障”解决的办法！)所讲述问题修改二个文件,就不用每个页面都要设置:imageUploadJson,fileManagerJson这二个参数.
修改位置与文件名称
1 kindeditor\plugins\image\image.html
将其中的:


var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;

就是把:[color=red]php替换成:jsp[/color],修改为:


var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../jsp/upload_json.jsp' : KE.g[id].imageUploadJson;

2 kindeditor\plugins\file_manager\file_manager.js

var JSON_URL = '../../php/file_manager_json.php';

var JSON_URL = '../../jsp/file_manager_json.jsp';

3 页面调用如下:


<script type="text/javascript">
  KE.show({
	id : 'content1',
	allowFileManager : true,
	afterCreate : function(id) {
	KE.event.ctrl(document, 13, function() {
	    KE.util.setData(id);
	    document.forms['example'].submit();
	});
	KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
		KE.util.setData(id);
		document.forms['example'].submit();
		});
	  }
	});
</script>

未修改前的代码如下:


<script type="text/javascript">
  KE.show({
	id : 'content1',
	allowFileManager : true,
        imageUploadJson : '${pageContext.request.contextPath}/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '${pageContext.request.contextPath}/kindeditor/jsp/file_manager_json.jsp',
	afterCreate : function(id) {
	KE.event.ctrl(document, 13, function() {
	    KE.util.setData(id);
	    document.forms['example'].submit();
	});
	KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
		KE.util.setData(id);
		document.forms['example'].submit();
		});
	  }
	});
</script>

4 各页面如下:
添加JSP页面


<%@ page language="java" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
	<head>
		<script type="text/javascript" charset="utf-8"
			src="${pageContext.request.contextPath}/kindeditor/kindeditor.js"></script>
		<script type="text/javascript">
		KE.show({
			id : 'content1',
			allowFileManager : true,
			afterCreate : function(id) {
				KE.event.ctrl(document, 13, function() {
					KE.util.setData(id);
					document.forms['example'].submit();
				});
				KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
					KE.util.setData(id);
					document.forms['example'].submit();
				});
			}
		});
	</script>
	</head>

	<body>
		<form action="${pageContext.request.contextPath}/kindeditors"
			name="example" id="example" method="post">

			<TABLE cellSpacing=1 cellPadding=0 width="800" border=0
				align="center">
				<tr>
					<td bgcolor="#ffffff" align="center">
						内容
					</td>
					<td bgcolor="#ffffff" align="center">
						<textarea id="content1" name="content1"
							style="width: 700px; height: 400px"></textarea>
					</td>
				</tr>				

				<tr>
					<td align="center" colspan="2">
						<input type="submit" value="保存!">
					</td>
				</tr>
			</TABLE>

		</form>
	</body>
</html>

Servlet代码:


String context = request.getParameter("content1");
		System.out.println("context: " + context);
		request.setAttribute("context",context);
		request.getRequestDispatcher("/kindeditor-edit.jsp").forward(request, response);

编辑JSP页面如下:


<%@ page language="java" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script type="text/javascript" charset="utf-8"
			src="${pageContext.request.contextPath}/kindeditor/kindeditor.js"></script>
		<script type="text/javascript">
		KE.show({
			id : 'content1',
			allowFileManager : true,
			afterCreate : function(id) {
				KE.event.ctrl(document, 13, function() {
					KE.util.setData(id);
					document.forms['example'].submit();
				});
				KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
					KE.util.setData(id);
					document.forms['example'].submit();
				});
			}
		});
	</script>
	</head>

	<body>
		<form action=""></form>
		<TABLE cellSpacing=1 cellPadding=0 width="800" bgColor=#ABACAD
			border=0>
			<tr>
				<td class=state bgcolor="#ffffff" align="center">
					编辑内容
				</td>
				<td bgcolor="#ffffff" align="center">
					<textarea id="content1" name="content1"
						style="width: 750px; height: 400px">${requestScope.context}</textarea>
				</td>
			</tr>

		</TABLE>
		<p><a href="${pageContext.request.contextPath}">返回</a></p>
	</body>
</html>

具体可参见Kindeditor提供的DEMO调用示例

天涯在身边

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Kindeditor环境搭建(JSP)

一环境: XP3+Myeclipse6.6+Tomcat7二官网:[url]http://www.kindsoft.net/[/url]需要的jar文件如下 :[img]http://dl.iteye.com/upload/attachment/433917/5ec24a8a-ba83-323d-bfa4-bcd08901c1b1.jpg[/img]三参考资料1 可视化编...
复制链接

扫一扫