开放JSP版KindEditor的附件JAR包源码
3月份的时候写了个JSP版本的kindeditor编辑器的帖子，没有想到大家的响应会这么强烈。不过随着日月的增长，此版本的插件也就暴露出一些BUG，如：Struts2如何集成，web.xml文件中配置上传属性不便修改且繁琐，上传图片(附件)不能保存于其它盘…………。现在平时开发的项目中都是使用KE作为在线编辑器，为了能更好、更方便的使用此编辑器，在休息的时间对原先的代码进行重构再封装，除对上个版本出现的BUG进行外，还统一整体的命名规范，新增了一些功能。
当前新版本插件的版本号为：kindeditor-plugin0.4RELEASE，JAR包中类的列表如下：
kindeditor-jsp-ss-1
此次重构所完成的功能主要有以下几点：
- 重构上传附件页面的选择按，仿图片上传的选择按钮；
- 增加Struts2环境集成；
- 增加上传属性配置功能，方便站点布署修改(暂未开放)；
- 增加其它盘存储功能，可自由选择存放位置方便备份(暂未开放)；
- 增加上传图片的文字水印功能(暂未开放)；
- 更Kindeditor编辑版本为3.5.6；
- 上传附件分类管理
如果你要把这个KE插件应用到你的项目中，很简单，如是Servlet环境只须一个步骤即可，Struts2环境则需要两个步骤，具体如下：
- Servlet环境：只需要在web.xml中配置如下的参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>KEUploadImgServlet</servlet-name> <servlet-class>com.elkan.kindeditor.servlet.plugin.KEUploadImgServlet</servlet-class> <init-param> <param-name>IMGSAVEPATH</param-name> <param-value>/upload/image/</param-value> </init-param> <!-- 缺省上传图片大小 <init-param> <param-name>MAXSIZE</param-name> <param-value>1048576</param-value> </init-param> 缺省上传图片类型 <init-param> <param-name>IMGTYPES</param-name> <param-value>jpg,jpeg,png,gif,bmp</param-value> </init-param> 缺省不压缩图片 <init-param> <param-name>MAXWIDTH</param-name> <param-value></param-value> </init-param> <init-param> <param-name>MAXHEIGHT</param-name> <param-value></param-value> </init-param> --> </servlet> <servlet> <servlet-name>KEManageImgServlet</servlet-name> <servlet-class>com.elkan.kindeditor.servlet.plugin.KEManageImgServlet</servlet-class> <init-param> <param-name>IMGSAVEPATH</param-name> <param-value>/upload/image/</param-value> </init-param> </servlet> <servlet> <servlet-name>KEUploadAttachServlet</servlet-name> <servlet-class>com.elkan.kindeditor.servlet.plugin.KEUploadAttachServlet</servlet-class> <init-param> <param-name>ATTACHSAVEPATH</param-name> <param-value>/upload/attach/</param-value> </init-param> <!-- 缺省上传附件大小 <init-param> <param-name>MAXSIZE</param-name> <param-value>10485760</param-value> </init-param> 缺省上传附件类型 <init-param> <param-name>ATTACHTYPES</param-name> <param-value>**</param-value> </init-param> --> </servlet> <servlet-mapping> <servlet-name>KEUploadImgServlet</servlet-name> <url-pattern>/keplugin/KEUploadImg.servlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>KEManageImgServlet</servlet-name> <url-pattern>/keplugin/KEManageImages.servlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>KEUploadAttachServlet</servlet-name> <url-pattern>/keplugin/KEUploadAttach.servlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <login-config> <auth-method>BASIC</auth-method> </login-config> </web-app> |
|---|
Jsp页面上KindEditor JS脚本配置[Servlet版本]：
1 2 3 4 5 6 7 8 9 10 11 | KE.show({ id: "editorServlet", resizeMode: 0, allowFileManager : true, imageUploadJson: "/KEPlugin/keplugin/KEUploadImg.servlet", fileManagerJson: "/KEPlugin/keplugin/KEManageImages.servlet", //缺省为 *.*表示所有类型文件 //accessoryTypes: "doc|docx", accessoryUploadJson: "/KEPlugin/keplugin/KEUploadAttach.servlet" }); |
|---|
- Struts2环境：先在web.xml中配置Struts2，如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> |
|---|
struts.xml文件配置，如下：（如设置了拦截器，请设置拦截器允许通过类型为KEStruts2Plugin的ACTION）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!--?xml version="1.0" encoding="UTF-8" ?--> <struts> <constant name="struts.i18n.encoding" value="UTF-8"></constant> <constant name="struts.action.extension" value="action"></constant> <constant name="struts.configuration.xml.reload" value="true"></constant> <constant name="struts.multipart.saveDir" value="\temp"></constant> <constant name="struts.multipart.maxSize" value="104857600"></constant> <package name="KEPlugin" extends="struts-default" namespace="/keplugin"> <action name="keUploadImg" class="com.elkan.kindeditor.struts2.plugin.KEUploadImgAction"> <!-- 缺省不压缩图片 --> <!--<param name="maxWidth"></param>--> <!--<param name="maxHeight"></param>--> <!-- 缺省上传图片大小 --> <!--<param name="maxSize">102400</param>--> <!-- 缺省为jpg,jpeg,png,gif,bmp类型图片 --> <!--<param name="imgTypes">jpg,jpeg,png,gif,bmp</param>--> <param name="imgSavePath">/upload/image/</param> </action> <action name="keUploadAttach" class="com.elkan.kindeditor.struts2.plugin.KEUploadAttachAction"> <param name="attachSavePath">/upload/attach/</param> <!-- 缺省上传附件大小 --> <!--<param name="maxSize">10485760</param>--> <!-- 缺省上传附件类型 --> <!--<param name="attachTypes">*.*</param>--> </action> <action name="keManagerImages" class="com.elkan.kindeditor.struts2.plugin.KEManageImgAction"> <param name="imgSavePath">/upload/image/</param> </action> </package> </struts> |
|---|
Jsp页面上KindEditor JS脚本配置[Struts2版本]：
1 2 3 4 5 6 7 8 9 10 11 | KE.show({ id: "editorStruts2", resizeMode: 0, allowFileManager : true, imageUploadJson: "/KEPlugin/keplugin/keUploadImg.action", fileManagerJson : "/KEPlugin/keplugin/keManagerImages.action", //缺省为 *.*表示所有类型文件 //accessoryTypes: "doc|docx", accessoryUploadJson: "/KEPlugin/keplugin/keUploadAttach.action" }); |
|---|
此次还借助JQuery EasyUI和SyntaxHighlighter语法高亮插件写了应用示例，下面我们就先来预览下Kindeditor在EasyUI模式下的清爽身影吧，闪亮登场……
- 应用示例首页
kindeditor-jsp-ss-2
- Servlet版本的KE
kindeditor-jsp-ss-3
- Struts2版本的KE
kindeditor-jsp-ss-4
- 附件上传页面
kindeditor-jsp-ss-5
- 上传图片管理
kindeditor-jsp-ss-6
- KE编辑器预览效果
kindeditor-jsp-ss-7
其它更多详细的应用功能，详细请见附件下载。最后要记得要支持国产技术发展呀，有意见请你拍砖吐槽。
把下载的压缩包上解压到Tomcat服务器的webapps目录下，启动Tomcat服务器，打开浏览器在地址栏输入：http://localhost:端口号/KEPlugin/index.jsp 就可以看到上面截图的应用示例了，Congratulation!
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号