JSP版的完善KindEditor在线编辑器(带附件上传与图片按日期分类管理功能)

          在此之前我一直都是在用FCKEditor在线编辑器，当然也有用过其它在线编辑器如eWebEditor,tinyMCE,CuteEditor，jHtmlArea等等，但在最终项目发布的时候并没有采用它们，因为它们要不是皮肤呆板，就是配置太烦琐，或是功能太少、浏览器兼容性不好等等。去年一个偶然的机会让我认识了KindEditor这款在线编辑器，正如它的名字那样这是款友好的编辑器，它不仅体积小配置简单，而且功能与皮肤也是令人相当的振憾。还有个很重要的因素，它是我们国人的开发的免费工具，从产品发布至今更新脚步未曾停止哦。下面就会大家介绍下经过我完善后的KindEditor吧。

 

     目前官方网站已经将KindEditor更新到了3.5.2版， 从3.4的版本开始官方就去除了一些不常用的功能改用plugin形式来丰富KindEidtor，这就为我们打造个性的插件奠定了基础。其实只要是你的JS基础够扎实，花点时间看看KindEditor的源码，你就完全可以在其原有的基础上完善出你所想要的功能。下面是我的完善记录：

 

1.集合了日期、时间、在线预览和特殊字符插件,采用3.0皮肤；

2.将图片上传与管理的JSP页面改写成SERVLET，同时去除JSON包；

3.添加图片压缩功能，对超出的宽高压缩成指定的值；

4.添加上传附件功能；

5.添加图片、附件按日期文件夹分类管理的功能；

6.添加上传图片、附件的title属性，缺省为原文件名；

7.添加上传附件相关的初始属性

8.修改从word粘贴样式，减少样式。

 

     关于如何使用我就不多说了，官方网站上有详细的API，文章最后我也会给出经我完善的KindEditor还有Demo，先来看看效果吧。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

完善后的KE目录

 

 

完善后的效果1
 
 

 完善后的效果2

 

附件上传效果

 

 

 

 

在线预览效果

 

 

KE、Struts2与Extjs3.3整合效果

 

 

   最后要说的是这款编辑器真的很不错，相信你用过它后一定会喜欢上它的，呵呵，多多支持国内软件事业的发展吧

  

评论

61 楼 yangpanwww 2013-05-20  

zjn_xy 写道

请问在jsp页面怎么引用的，能把做的demo发给我吗 [e-mail]

我不是有附件吗。。。自己下载吧

60 楼 zjn_xy 2013-05-16  

请问在jsp页面怎么引用的，能把做的demo发给我吗 [e-mail]

59 楼 w156445045 2012-12-24  

senhui19 写道

w156445045 写道

JSP上传出现错误，JS报错没有权限kindeditor.js

请问是什么原因啊，

我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp

折腾半天了，谢谢。

你用了spring的security吗？？或是其它权限拦截机制，仔细检查一下。

谢谢博主的回复，我是直接替换upload_json.jsp文件
替换后的内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ page import="java.util.*,java.io.*" %> 
<%@ page import="java.text.SimpleDateFormat" %> 
<%@ page import="org.apache.commons.fileupload.*" %> 
<%@ page import="org.apache.commons.fileupload.disk.*" %> 
<%@ page import="org.apache.commons.fileupload.servlet.*" %> 
<%@ page import="org.json.simple.*" %> 
<%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper" %> 
  
<% 
//文件保存目录路径     
//D:\Tomcat6.0\webapps\zswz\attached/ 
String savePath = request.getSession().getServletContext().getRealPath("/") + "kindeditor/attached/"; 
//文件保存目录URL /zswz/attached/ 
String saveUrl = request.getContextPath() + "/kindeditor/attached/"; 
//定义允许上传的文件扩展名 
//定义允许上传的文件扩展名 
HashMap<String, String> extMap = new HashMap<String, String>(); 
extMap.put("image", "gif,jpg,jpeg,png,bmp"); 
extMap.put("flash", "swf,flv"); 
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); 
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); 
  
//允许最大上传文件大小 struts.xml struts.multipart.maxSize=3G 
long maxSize = 3000000000l; 
  
response.setContentType("text/html; charset=UTF-8"); 
  
if(!ServletFileUpload.isMultipartContent(request)){ 
    out.println(getError("请选择文件。")); 
    return; 
} 
//检查目录 
File uploadDir = new File(savePath); 
if(!uploadDir.isDirectory()){ 
    out.println(getError("上传目录不存在。")); 
    return; 
} 
//检查目录写权限 
if(!uploadDir.canWrite()){ 
    out.println(getError("上传目录没有写权限。")); 
    return; 
} 
  
String dirName = request.getParameter("dir");//image 
if (dirName == null) { 
    dirName = "image"; 
} 
if(!extMap.containsKey(dirName)){ 
    out.println(getError("目录名不正确。")); 
    return; 
} 
//创建文件夹 
savePath += dirName + "/";//D:\Tomcat6.0\webapps\zswz\attached/image/ 
saveUrl += dirName + "/";///zswz/attached/image/ 
File saveDirFile = new File(savePath); 
if (!saveDirFile.exists()) { 
    saveDirFile.mkdirs(); 
} 
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); 
String ymd = sdf.format(new Date()); 
savePath += ymd + "/";//D:\Tomcat6.0\webapps\zswz\attached/image/20111129/ 
saveUrl += ymd + "/";///zswz/attached/image/20111129/ 
File dirFile = new File(savePath); 
if (!dirFile.exists()) { 
    dirFile.mkdirs(); 
} 
if (!dirFile.isDirectory()) { 
    out.println(getError("上传目录不存在 。")); 
    return; 
} 
//检查目录写入权限 
if (!dirFile.canWrite()) { 
    out.println(getError("上传目录没有写入权限。")); 
    return; 
} 
  
//Struts2 请求 包装过滤器 
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request; 
//获得上传的文件名 
String fileName = wrapper.getFileNames("imgFile")[0];//imgFile,imgFile,imgFile 
//获得文件过滤器 
File file = wrapper.getFiles("imgFile")[0]; 
  
//检查扩展名 
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); 
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){ 
    out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。")); 
    return; 
} 
//检查文件大小 
if (file.length() > maxSize) { 
        out.println(getError("上传文件大小超过限制。")); 
        return; 
}  
  
  
//重构上传图片的名称  
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); 
String newImgName = df.format(new Date()) + "_"
                + new Random().nextInt(1000) + "." + fileExt; 
byte[] buffer = new byte[1024]; 
//获取文件输出流 
FileOutputStream fos = new FileOutputStream(savePath +"/" + newImgName); 
//获取内存中当前文件输入流 
InputStream in = new FileInputStream(file); 
try { 
        int num = 0; 
        while ((num = in.read(buffer)) > 0) { 
                fos.write(buffer, 0, num); 
        } 
} catch (Exception e) { 
        e.printStackTrace(System.err); 
} finally { 
        in.close(); 
        fos.close(); 
} 
//发送给 KE  
JSONObject obj = new JSONObject(); 
obj.put("error", 0); 
obj.put("url", saveUrl +"/" + newImgName); 
///zswz/attached/image/20111129/  image 20111129195421_593.jpg 
out.println(obj.toJSONString()); 
%> 
<%! 
private String getError(String message) { 
    JSONObject obj = new JSONObject(); 
    obj.put("error", 1); 
    obj.put("message", message); 
    return obj.toJSONString(); 
} 
%> 

这个在XP下面使用是没任何问题的，但是一到windows server 2003上面就报错了。请问是为什么呢？谢谢。

org.apache.jasper.JasperException: An exception occurred processing JSP page /kindeditor/jsp/upload_json.jsp at line 81

78: //Struts2 璇锋眰 鍖呰杩囨护鍣�
79: MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request; 
80: //鑾峰緱涓婁紶鐨勬枃浠跺悕 
81: String fileName = wrapper.getFileNames("imgFile")[0];//imgFile,imgFile,imgFile 
82: //鑾峰緱鏂囦欢杩囨护鍣�
83: File file = wrapper.getFiles("imgFile")[0]; 
84:   


Stacktrace:
	org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:521)
	org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:430)
	org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
	org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.doFilter(StrutsPrepareAndExecuteFilter.java:88)
	org.tuckey.web.filters.urlrewrite.RuleChain.handleRewrite(RuleChain.java:176)
	org.tuckey.web.filters.urlrewrite.RuleChain.doRules(RuleChain.java:145)
	org.tuckey.web.filters.urlrewrite.UrlRewriter.processRequest(UrlRewriter.java:92)
	org.tuckey.web.filters.urlrewrite.UrlRewriteFilter.doFilter(UrlRewriteFilter.java:390)
	org.springframework.orm.hibernate3.support.OpenSessionInViewFilter.doFilterInternal(OpenSessionInViewFilter.java:198)
	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)

root cause
java.lang.NullPointerException
	org.apache.jsp.kindeditor.jsp.upload_005fjson_jsp._jspService(upload_005fjson_jsp.java:149)
	org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:388)
	org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
	org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.doFilter(StrutsPrepareAndExecuteFilter.java:88)
	org.tuckey.web.filters.urlrewrite.RuleChain.handleRewrite(RuleChain.java:176)
	org.tuckey.web.filters.urlrewrite.RuleChain.doRules(RuleChain.java:145)
	org.tuckey.web.filters.urlrewrite.UrlRewriter.processRequest(UrlRewriter.java:92)
	org.tuckey.web.filters.urlrewrite.UrlRewriteFilter.doFilter(UrlRewriteFilter.java:390)
	org.springframework.orm.hibernate3.support.OpenSessionInViewFilter.doFilterInternal(OpenSessionInViewFilter.java:198)
	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter

58 楼 senhui19 2012-12-19  

w156445045 写道

JSP上传出现错误，JS报错没有权限kindeditor.js

请问是什么原因啊，

我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp

折腾半天了，谢谢。

你用了spring的security吗？？或是其它权限拦截机制，仔细检查一下。

57 楼 senhui19 2012-12-19  

zyengogo 写道

问哈，为什么，我在ie6上边，显示不出来，运行不起。

会不会是你的环境配置的有问题呢？？

我在IE6下测试运行，显示都正常！

56 楼 zyengogo 2012-12-05  

问哈，为什么，我在ie6上边，显示不出来，运行不起。

55 楼 w156445045 2012-11-15  

JSP上传出现错误，JS报错没有权限kindeditor.js

请问是什么原因啊，

我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp

折腾半天了，谢谢。

54 楼 searchjack 2012-11-10  

不错 、

53 楼 feifeiyang 2012-08-30  

下不下来，能否给发一份 [e-mail] 谢谢了。

52 楼 lilin9043 2011-10-27  

你好！现在我的项目需要用到，  我这个项目比较小，用了Struts2+JDBC  现在我需要用到编辑器，我看到你的文件，但是我没有看懂，这个我比较急，能QQ聊一下吗？616881417

51 楼 gaohuixiang315 2011-10-07  

最新版本的Kindeditor配置 更简单 哦

50 楼 lys221221 2011-09-24  

不然怎么用啊

49 楼 lys221221 2011-09-24  

你的这几个文件那 uploadImage.html uploadImgManager.html uploadAccessory.html 能不能给发下 啊497234690QQ

48 楼 gaohuixiang315 2011-09-13  

很强大的编辑器，支持一下。。。

47 楼 lr890823 2011-08-27  

楼主能不能把你的Extjs + struts + kindeditor的项目源码发一下啊，我最近做一个东西，急需啊，万分感谢！万分感谢！[e-mail]

46 楼 justdo2008 2011-07-30  

另外有朋友说strus2版本的不好处理，我在web配置的时候，没有配置*.action之类的，因为有的东西需要控制，不知道我这么配置是不是会浪费。不过目前看来没什么问题。就是配置要多些。

45 楼 justdo2008 2011-07-30  

非常感谢你。不过在使用说明的txt里上几句配置。。最后在war里找到，然后改了下，呵呵。谢谢

44 楼 不记得 2011-07-04  

太感谢了！

43 楼 java_林 2011-05-26  

sziitjiang 写道

"服务器发生故障"，怎么办？

原因是41楼所说的，web.xml中不要写成<url-pattern>/*</url-pattern>
换成具体的<url-pattern>*.action</url-pattern>

42 楼 senhui19 2011-05-05  

<p>kindeditor.jar源码已经公布，请查看：<a title="kindeditor.jar源码" href="/topic/1028917" target="_blank">http://www.iteye.com/topic/1028917</a></p>
<p> </p>