今天终于把这个东东搞定了（主要是上传本地图片的问题，由于kindEditor本身只有PHP版本的，对于我这种java程序员看起来有点像天书）！附件有代码提供下载（内附使用说明书）
我在网上找了一个JSP版本的 网址如下：http://wallimn.iteye.com/blog/327800（他测试的版本是2.4的，现在已经是3.3.1了。所以有点小问题，我稍微修改了一下）
官方网站是：http://www.kindsoft.net/（到官方网站学学，蛮不错的）
1.到官方网站下载kindEditor 网址如下：http://www.kindsoft.net/down.php 。
2. 在Eclipse下建立一个Web项目，将下载下来的文件拷贝到 WebContent目录下。
3. 在WebContent目录下建立一个HTML测试文件：kindEditorTest.html ，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="utf-8" src="kindEditor/kindeditor-3.3.1/kindeditor.js"></script>
<script type="text/javascript">
KE.show({
id : 'content_1' //TEXTAREA输入框的ID
});
</script>
<title>Insert title here</title>
</head>
<body>
<form action="KindEditorAction.do" method="post">
<textarea id="content_1" name="content" cols="100" rows="8"></textarea>
<input type="submit" value="submit">
</form>
</body>
</html>
说明：1.这里引入了一个外部JS文件，这就是kindEditor。注意路径，你的可能与我的不同！
2.js代码里面有一句KE.show();KE是kindEditor里面的东西，里面的id指定哪个textarea标签来接收可视化编辑框的内容！下面有一个id为content_1的textarea标签
3.form标签是我自己加的，为了测试后台能不能够得到数据，可以先去掉。
4. 这个时候你请求这个页面的时候应该可以看到那个可视化编辑框了，现在唯一的问题就是还不能够上传本地图片，你可以试试！
5. 查看kindEditor文件夹的plugins文件夹里面有一个image.html,打开这个文件。找到action="./../php/upload.php"，看到了没有，就是这个东东，kindEditor默认实现的是PHP版本的本地图片上传，把upload.php修改成upload.jsp。并不是这样就完了，没这么简单,呵呵...
6. 找到PHP文件夹，在下面建立一个upload.jsp文件，内容如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@page import = "java.net.URLDecoder" %>
<%@ page import = "java.util.*" %>
<%@ page import = "org.apache.commons.fileupload.*" %>
<%
String contextPath = request.getContextPath() ;
String SavePath = request.getSession().getServletContext().getRealPath("/")+"image\\";
String SaveUrl = contextPath+ "/image/" ;
System.out.println("c--->"+contextPath+"----->"+SavePath+"---->"+SaveUrl);
String[] ExtArr = new String[]{ ".gif" , ".jpg" , ".png" , ".bmp" };
int MaxSize = 4000000 ;
String Msg1 = "上传文件大小超过限制。" ;
String Msg2 = "上传文件的扩展名不被允许。" ;
String Msg3 = "文件上传失败。" ;
String Msg=Msg3;
//java.io.File files=new java.io.File(".");
//String FileName = (String)request.getAttribute("fileName");
String FileWidth = null ;
String FileHeight = null ;
String FileBorder = null ;
String FileTitle = null ;
String FileTitle2 = null ;
String FileAlign = null ;
String FileHspace = null ;
String FileVspace = null ;
Date dt = new Date();
Random random = new Random();
random.nextInt();
String FileNameAuto = String.format( "%X_%X" , new Object[]{ new Integer(( int )(dt.getTime())), new Integer(random.nextInt())});
System.out.println(FileNameAuto);
String FilePath = null ;
String FileUrl = null ;
DiskFileUpload fu = new DiskFileUpload();
fu.setSizeMax(MaxSize); //
fu.setSizeThreshold( 4096 );
fu.setRepositoryPath( "c:/" );
//ServletRequestContext src = new ServletRequestContext(request);
List fileItems = fu.parseRequest(request);
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
String fieldName = item.getFieldName();
if (!item.isFormField()) {
String name = item.getName();
long size = item.getSize();
if ((name== null ||name.equals( "" )) && size== 0 )
continue ;
if (size>MaxSize) {
Msg=Msg1;
break ;
}
//namename = name.replace(':','_');
//namename = name.replace('\\','_');
int pos = name.lastIndexOf( "." );
String ext = name.substring(pos);
boolean b= false ;
for ( int m= 0 ;m<ExtArr.length; m++){
if (ExtArr[m].equalsIgnoreCase(ext)){
b= true ;
break ;
}
}
if (b== false ){
Msg=Msg2;
break ;
}
FilePath = SavePath + FileNameAuto+ext;
System.out.println(FilePath+" "+SavePath+" "+FileNameAuto+" "+ext);
FileUrl = SaveUrl + FileNameAuto+ext;
java.io.File f= new java.io.File(FilePath);
item.write(f);
}
else {
String fieldValue = item.getString();
if ( "imgWidth" .equals(fieldName)){
FileWidth = fieldValue;
}
else if ( "imgHeight" .equals(fieldName)){
FileHeight = fieldValue;
}
else if ( "imgBorder" .equals(fieldName)){
FileBorder = fieldValue;
}
else if ( "imgTitle" .equals(fieldName)){
FileTitle = fieldValue;
}
else if ( "imgTitle2" .equals(fieldName)){
//FileTitle2 = URLDecoder.decode(fieldValue,"GB18030");
FileTitle2 = URLDecoder.decode(fieldValue, "UTF-8" );
}
else if ( "imgAlign" .equals(fieldName)){
FileAlign = fieldValue;
}
else if ( "imgHspace" .equals(fieldName)){
FileHspace = fieldValue;
}
else if ( "imgVspace" .equals(fieldName)){
FileVspace = fieldValue;
}
}
}
if (FileUrl!= null ){
out.println( "<html>" );
out.println( "<head>" );
out.println( "<title>error</title>" );
out.println( "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">" );
out.println( "</head>" );
out.println( "<body>" );
out.println("<script type=\"text/javascript\">parent.KE.plugin[\"image\"].insert(\"content_1\",\""+FileUrl+"\",\""+FileTitle+"\",\""+FileWidth+"\",\""+FileHeight+"\",\""+FileBorder+"\");</script>");
System.out.println("<script type=\"text/javascript\">parent.KE.plugin[\"image\"].insert(\"content_1\",\""+FileUrl+"\",\""+FileTitle+"\",\""+FileWidth+"\",\""+FileHeight+"\",\""+FileBorder+"\");</script>");
out.println( "</body>" );
out.println( "</html>" );
}
else {
out.println( "<html>" );
out.println( "<head>" );
out.println( "<title>error</title>" );
out.println( "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">" );
out.println( "</head>" );
out.println( "<body>" );
out.println( "<script type=\"text/javascript\">alert(\"" + Msg + "\");parent.KindDisableMenu();parent.KindReloadIframe();</script>" );
out.println( "</body>" );
out.println( "</html>" );
}
%>
7. 跑一下试试，这个时候你的后台应该会报错，没有找到一些包。这是因为你缺少一些上传文件的外部jar文件，他们是：commons-fileupload-1.2.1.jar与commons-io-1.4.jar ，附件有下载（里面有详细的说明）
8. 这个时候应该没有什么问题了
9. 在这个过程中，我遇到了一个路径问题。大家看一看，假设你在WebContent下面建立了一个image文件夹，你点击上传文件的时候，文件并没有保存在这个文件夹里面。你可以打印一下那个上传文件保存路径，我这里是一串这样奇怪的东西：E:\Eclipse项目\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\ShoppingNetwork\image\。如果你把项目当做war文件导出去，单独在tomcat中部署，那样是保存在WebContent下面的image文件夹里面。我自作聪明地把那个保存路径改为：E:\Eclipse项目\ShoppingNetwork\WebContent\image，结果是我能够看到上传的图片，但是在那个编辑器里面不显示，这个问题折磨了我好久。现在我终于明白了，Eclipse在把项目部署到tomcat的时候就临时把项目拷贝到那个奇怪的目录下面，你可以去那个奇怪的目录下面去找找，应该能够找到你上次的文件！
就这样了，希望大家都能够弄明白！
分享到：
相关推荐
kindeditor富文本框编辑器 script type="text/javascript"> var validator = null; $(function(){ KE.show({ id : 'content', imageUploadJson : 'upload_json.jsp', fileManagerJson...
KindEditor富本编辑器-jsp版 直接复制到项目里直接可以用,本地路径 http://127.0.0.1:8080/KindEditor/kindeditor-4.1.10/examples/default.html
KindEditor是一款功能强大的富文本编辑器，主要用于网页上提供便捷的文本编辑功能。它支持多种浏览器，包括Internet Explorer、Firefox、Chrome、Safari 和 Opera，为用户提供了与Microsoft Word相似的编辑体验，...
KindEditor是一款广泛使用的开源富文本编辑器，适用于多种编程语言环境，包括Java。在这个例子中，我们看到它与JSP（JavaServer Pages）结合使用，尽管其核心逻辑可以轻松地转化为Servlet来实现。 1. **JSP基础**：...
富文本编辑器KindEditor-4.0.1是一款广泛应用在网页开发中的专业级富文本编辑组件。它以其功能强大、全面而闻名，为开发者提供了一种便捷的方式来创建和编辑具有格式化的文字内容，如HTML文档。这个编辑器适用于各种...
Java Web 富文本编辑器（KindEditor） Java Web 富文本编辑器（KindEditor）是基于 Java Web 开发的富文本编辑器解决方案，旨在解决开发过程中的编辑功能、图片文件等操作。通过使用 KindEditor，可以快速实现富...
富文本编辑器KindEditor是一款广泛应用于网页开发中的开源编辑器，它提供了丰富的文本格式化功能，使得用户在网页上能够方便地编辑和排版文本。KindEditor的主要特点是易用、可定制性强，支持多种浏览器环境，包括IE...
KindEditor是一款功能强大的开源富文本编辑器，尤其适合Java Web项目，因为它是JSP兼容的。下面将详细介绍KindEditor以及其在实际应用中的相关知识点。 1. **KindEditor的基本结构** KindEditor是由一系列...
Java 富文本编辑器KindEditor 4.0.3与JSP整合教程 在Web开发中，富文本编辑器是一个非常重要的组件，它允许用户在网页上进行格式化的文本输入，如添加图片、链接等。KindEditor是一款开源的Java语言开发的富文本...
富文本编辑器是一种允许用户输入并格式化文本的工具，与传统的纯文本输入框相比，它可以提供诸如字体选择、字号调整、颜色设置、插入图片、超链接创建等多种格式化选项。 2. **KindEditor的特点** - **跨平台**：...
富文本编辑器KindEditor在Java实现Spring MVC框架中的应用是一个常见的需求，特别是在开发Web应用程序时，需要用户输入格式丰富的文本内容。这篇文档将详细介绍如何在Spring MVC项目中集成并使用KindEditor。 首先...
本文将详细介绍两款强大的富文本编辑器，它们分别是QQ空间写日志编辑器和KindEditor。 首先，QQ空间写日志编辑器是腾讯公司为QQ空间用户设计的一款在线富文本编辑器。这款编辑器具有丰富的格式化选项，使得用户在...
通过以上步骤，我们就成功地在Django Admin中集成了KindEditor富文本编辑器。在编辑内容时，用户可以看到一个可视化、功能丰富的编辑界面，提升了编辑效率。同时，KindEditor还支持更多的自定义配置和扩展功能，可以...
本文将详细介绍三款知名的富文本编辑器：umeditor1_2_3-utf8-jsp、eWebEditor_v280_Free_Final和kindeditor-4.1.11-zh-CN。 首先，umeditor是一款由百度开发的轻量级富文本编辑器，特别适合对性能和加载速度有较高...
KindEditor是一款开源的JavaScript富文本编辑器，支持跨浏览器运行，提供多种功能如图片上传、视频插入、表格编辑等。这个修改版可能在原基础上进行了功能优化、界面改进或性能提升，以适应特定的项目需求，同时强调...
在IT行业中，尤其是在Web开发领域，富文本编辑器（如FCKeditor和KindEditor）扮演着重要的角色。这些编辑器允许用户在网页上创建、编辑和格式化文本，类似于Word等桌面应用程序。本文将深入探讨FCKeditor和...
8. **安全性**：由于富文本编辑器可能引入脚本注入（XSS）风险，开发者需要确保对用户输入进行适当的清理和转义，防止恶意代码被执行。 9. **响应式设计**：随着移动设备的普及，富文本编译器还需要适应不同屏幕...
KindEditor是一款开源的JavaScript富文本编辑器，它支持多种浏览器，提供了丰富的编辑功能，如文字格式化、图片上传、链接插入等。KindEditor的一大亮点是其易于集成和自定义，开发者可以根据需求调整编辑器的外观和...