一 环境: 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
将其中的:
Js代码 收藏代码
var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;
就是把:php替换成:jsp,修改为:
Js代码 收藏代码
var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../jsp/upload_json.jsp' : KE.g[id].imageUploadJson;
2 kindeditor\plugins\file_manager\file_manager.js
Js代码 收藏代码
var JSON_URL = '../../php/file_manager_json.php';
Java代码 收藏代码
var JSON_URL = '../../jsp/file_manager_json.jsp';
3 页面调用如下:
Js代码 收藏代码
<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>
未修改前的代码如下:
Js代码 收藏代码
<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页面
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代码:
Java代码 收藏代码
String context = request.getParameter("content1");
System.out.println("context: " + context);
request.setAttribute("context",context);
request.getRequestDispatcher("/kindeditor-edit.jsp").forward(request, response);
编辑JSP页面如下:
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>
分享到:
相关推荐
KindEditor4.x 官方帮助文档.官方最新的web编辑器. 官方没有下载的帮助文档。只有在线浏览的。本人下载出来做成了chm格式的。给大家下载。方便查阅!!!!!!
极品开源免费在线文本forasp.net_kindeditor插入文本图片视频flash等,已经配置完毕,直接使用。大的文件等先ftp上传到相关目录
要修改默认后台程序处理文件,修改plugins(插件文件夹)下的JavaScript内容fileManagerJson改为自己使用程序语言
kindeditor-3.1.1.zip 在线编辑器 kindeditor-3.1.1.zip 在线编辑器 kindeditor-3.1.1.zip 在线编辑器
TinyMCE是一款非常优秀的编辑器,KindEditor 2.x和3.x参考了TinyMCE的UI和部分代码,并包含了TinyMCE风格。 4. FCKEditor http://www.fckeditor.net/ FCKEditor是老牌编辑器,KindEditor 2.x参考了FCKEditor的UI和...
kindeditor 4.x JSP Eclipse 项目 上传FLASH与图片 本项目是eclipse 3.4 java 1.6.31 Tomcat6.0.35 能通过linux测试。 这个是dome版本,仅供学习,请勿用在商业用途。 并通过测试。 如果有问题,请E-mail到 ...
kindeditor从3.x升级到4.x版本
KindEditor富文本编辑器以及帮助文档使用说明,欢迎下载
KindEditor 4_x Documentation
kindEditor编辑器使用方法_附带实际案例(asp下面的例子,php .net java下雷同)此方法主要讲述KindEditor编辑器无法获得提交的数据问题
本资源内附使用说明文档,简单易懂。 KindEditor是一套开源的HTML可视化编辑器,兼容IE、Fire...4. 修改编辑器风格很容易,只需修改一个CSS文件。 5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。
Kindeditor的使用方法,你可能会用到的哦
kindeditor4.1.11.rar
kindeditor 超级强大的文本编辑器 UBBkindeditor 超级强大的文本编辑器 UBB
这是一个在线编辑文档的实例,用的kindeditor做插件,实现像iteye等网站一样的论文提交功能,资料源于网络。
kindeditor4.1.4在线编辑器+中文帮助文档 kindeditor4.1.4在线编辑器+中文帮助文档
java web富文本编辑器(kindeditor)解决开发过程中的编辑功能,图片文件等操作.
富文本编辑器kindeditor-4.0.5.zip 非常强大好用的编辑器,用于网页编辑非常方便,可编辑文字,图片,上传文件等等,内有使用说明
KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的...
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。