1. 爱易网页
  2. JavaSript
  3. Kindeditor环境筹建(JSP)

Kindeditor环境筹建(JSP)

日期：2014-05-16　 浏览次数：20456 次

Kindeditor环境搭建(JSP)
一 环境: XP3+Myeclipse6.6+Tomcat7
二 官网:http://www.kindsoft.net/
需要的jar文件如下 :

三 参考资料
1 可视化编辑器的开发心得
http://www.iteye.com/topic/552177
2 KindEditor使用
http://jonney-82.iteye.com/blog/447579
3 kindeditor错误“服务器发生故障”解决的办法！
http://www.webqi.cn/news/news179.html
4 基于kindeditor3.4的上传功能的JAVA实现
http://www.iteye.com/topic/599971
四 具体代码:版本: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;

就是把:php替换成:jsp,修改为:
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代码:

相关资料更多>

  1. eclipse设置新建jsp文件默认字符编码替utf-8
  2. js 获取下传文件名
  3. Javascript的调试凶器Firebug使用详解
  4. JS动态加载和取值有关问题
  5. 想做一个霓虹灯闪耀效果
  6. Links对象访问超链接,该如何解决
  7. javascript 的多参数识别有关问题
  8. 这段代码 如何访问到里面的函数
  9. JS图片切换，带缩略图版解决方案