`

Kindeditor环境搭建(JSP)

JSPjsonPHPHTMLServlet 
阅读更多
一 环境: 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代码: 
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调用示例
  • 大小: 4.2 KB
分享到：
| Oracle 自动生成 32位ID
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java 富文本kindeditor4.0.3_jsp整合

    Java 富文本编辑器KindEditor 4.0.3与JSP整合教程 在Web开发中，富文本编辑器是一个非常重要的组件，它允许用户在网页上进行格式化的文本输入，如添加图片、链接等。KindEditor是一款开源的Java语言开发的富文本...

    kindeditor编辑器jsp版

    在JSP（JavaServer Pages）环境中，KindEditor能够无缝集成，提供用户友好的富文本编辑体验。 1. **富文本编辑器的基本概念** 富文本编辑器是一种允许用户输入并格式化文本的工具，与传统的纯文本输入框相比，它...

    kindeditor在jsp中如何使用

    kindeditor在jsp中如何使用。我的经验总结。贡献出来供大家学习，少走弯路。

    kindeditor的JSP示例

    虽然官方的示例可能需要较多的修改才能适应你的项目，但这里我们提供了一个最小化的集成示例，其中包含了`jsp/demo.jsp`，这是一个可以直接运行的演示页面，可以帮助你快速理解如何在JSP中调用和使用KindEditor。...

    KindEditor+jsp

    在"KindEditor+jsp"的场景下，开发者通常会创建一个JSP页面，将KindEditor嵌入其中，以实现用户可以在网页上进行文字编辑、格式调整、图片上传等操作。在处理表单提交时，需要注意的一个关键点是，由于KindEditor是...

    kindeditor(jsp版)视频上传

    本文将深入探讨KindEditor在jsp环境下的视频上传功能及其配置。 首先，视频上传功能允许用户在编辑器中直接嵌入视频，提高用户体验，无需离开编辑页面就能完成视频的添加和播放。KindEditor默认并不直接支持视频...

    jsp+kindeditor html 页面编辑

    集成KindEditor到JSP项目中，首先需要将KindEditor的资源文件（如js、css、images等）部署到服务器的公共目录，然后在JSP页面中通过`&lt;script&gt;`标签引入KindEditor的JavaScript库。接下来，我们需要创建一个div元素...

    JSP kindeditor编辑器使用，能上传图片，解决乱码问题

    在本文中，我们将深入探讨如何在JSP环境中使用KindEditor编辑器，以及如何解决与上传图片和乱码问题相关的挑战。KindEditor是一款功能强大的HTML在线编辑器，它为用户提供了一个类似Word的界面来编辑网页内容。以下...

    kindEditor编辑器用jsp标签引用

    &lt;jsp:include page="kindEditor/jsp/test.jsp"&gt; &lt;jsp:param name="formName" value="form1"/&gt; &lt;jsp:param name="editorId" value="content" /&gt; &lt;jsp:param name="eWidth" value="800" /&gt; &lt;jsp:param name=...

    kindeditor JSP版支持kindeditor4.0.3

    &lt;servlet-class&gt;com.elkan.kindeditor.upload.UploadImage&lt;/servlet-class&gt; &lt;!-- 上传图片保存的目录 --&gt; &lt;param-name&gt;UPLOAD_PATH &lt;param-value&gt;uploadImg/ &lt;!-- 限制上传图片的大小，单位字节(缺省值为1...

    kindEditor富文本编辑器（JSP版）

    这个编辑器是用Java语言编写的，适用于JSP（JavaServer Pages）环境，使得开发者可以轻松集成到自己的Web应用中，为用户提供类似于Microsoft Word的编辑功能。 在Web开发中，富文本编辑器是必不可少的工具之一，它...

    kindeditor（asp,php,jsp,asp.net)在线编辑器源码

    - **JSP**：对于JSP，KindEditor会提供一个Java处理类，处理文件上传和保存操作。开发者需要将这个类编译并部署到JSP应用中。 - **ASP.NET**：在ASP.NET环境下，编辑器的.NET版本提供了一个ASP.NET控件，可以直接拖...

    kindEditor4.12 JSP

    KindEditor4.12 JSP 是一款基于Java Servlet的开源富文本编辑器，适用于Web应用中的文本编辑功能。它提供了一种用户友好的界面，让用户能够像在桌面应用中一样编辑文字，支持插入图片、超链接、表格、代码块等多种...

    jsp中kindeditor的用和遇到的问题总结附上项目配置

    KindEditor是一款基于JavaScript编写的开源富文本编辑器，支持多种浏览器环境，包括IE6+、Firefox、Chrome、Safari和Opera等。它提供了一套完整的API，可以自定义编辑器样式、功能和行为。其核心特性包括：文本格式...

    KindEditor富本编辑器-jsp版

    KindEditor富本编辑器-jsp版 直接复制到项目里直接可以用,本地路径 http://127.0.0.1:8080/KindEditor/kindeditor-4.1.10/examples/default.html

    jsp实现kindeditor在线编辑器可上传图片，附件源码献上

    本篇将深入探讨如何使用JSP与KindEditor在线编辑器实现图片和附件的上传功能，并分享一套已经成功部署并经过测试的源码。首先，我们需要了解JSP（JavaServer Pages）和KindEditor的基本概念。 **JSP技术介绍** JSP...

    kindeditor jsp 上传附件版

    综上所述，“KindEditor jsp 上传附件版”是一个针对JSP环境定制的文件上传解决方案，它涵盖了从前端编辑器到后端服务器的完整流程，包括KindEditor的配置、JSP的文件上传处理、Servlet API的使用、JSON响应的构建...

    kindeditor-3.4.4文本编译器JSP版

    此为kindeditor-3.4.4文本编译器JSP版 里面实现图片上传 此项目直接导入myeclipse就可以使用 测试输入http://localhost:8080/jsp/demo.jsp 此为tomcat服务器访问路径

    kindeditor jsp示例源码（包含上传文件）

    本示例源码是专门为Java Web开发者设计的，展示了如何在JSP页面中集成KindEditor并实现文件上传功能。 1. **KindEditor的基本使用** KindEditor提供了JavaScript库，可以在网页中创建一个全功能的富文本编辑器。...

    jsp在线编辑器fckeditor和kindeditor的实例

    本文将深入探讨FCKeditor和KindEditor这两个流行的JSP在线编辑器，并介绍如何将它们集成到你的项目中。 **FCKeditor** FCKeditor是一款开源的JavaScript富文本编辑器，最初由Fernando Montesinos开发。它提供了...

Magicbox
Global site tag (gtag.js) - Google Analytics