JSP版本的KindEidtor在线编辑器第二季：Servlet+Struts2集成版

  3月份的时候写了个JSP版本的kindeditor编辑器的帖子，没有想到大家的响应会这么强烈。不过随着日月的增长，此版本的插件也就暴露出一些BUG，如：Struts2如何集成，web.xml文件中配置上传属性不便修改且繁琐， 上传图片(附件)不能保存于其它盘…………。现在平时开发的项目中都是使用KE作为在线编辑器，为了能更好、更方便的使用此编辑器，在休息的时间对原先的代码进行重构再封装，除对上个版本出现的BUG进行外，还统一整体的命名规范，新增了一些功能。当前新版本插件的版本号为：kindeditor-plugin0.4RELEASE，JAR包中类的列表如下：

 

此次重构所完成的功能主要有以下几点：

1.重构上传附件页面的选择按，仿图片上传的选择按钮；

2.增加Struts2集成；

3.增加上传属性配置功能，方便站点布署修改(收费)；

4.增加其它盘存储功能，可自由选择存放位置方便备份(收费)；

5.增加上传图片的文字水印功能(收费)；

6.更Kindeditor编辑版本为3.5.6；

7.上传附件分类管理

 

如果你要把这个KE插件应用到你的项目中，很简单，如是Servlet环境只须一个步骤即可，Struts2环境则需要两个步骤，具体如下：

 

1.Servlet环境：只需要在web.xml中配置如下的参数

 

<?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配置如下:

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"    		
});

 2.Struts2环境：先在web.xml中配置Struts2，如下：

<?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）

<!--?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配置如下:

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模式下的清爽身影吧，闪亮登场……

 

1.应用示例首页

 

2.Servlet版本的KE

 

 

3.Struts2版本的KE

 

4.附件上传页面

 

5.上传图片管理

 

6.KE编辑器预览效果

 

其它更多详细的应用功能，详细请见附件下载。最后要记得要支持国产技术发展呀，呵呵

 

文章就写到这啦，你喜欢的话就拍拍砖吧，嘻嘻……

 

（不好意思，可能是昨晚太困了下载地址忘记写上去啦）

PS：下载KindEditor应用示例下载

 

[ 把下载的压缩包上解压到Tomcat服务器的webapps目录下，启动Tomcat服务器，打开浏览器在地址栏输入：http://localhost:端口号/KEPlugin/index.jsp 就可以看到上面截图的应用示例了，Congratulation! ]

评论

15 楼 testspringmail 2013-11-11  

我记得那个多文件一起上传的貌似是 只支持图片的。。。如果要改成传文件还需要改flash代码

14 楼 isensen 2012-02-13  

上传图片和上传附件时.发生服务器发生故障 错误....楼主能给个解决办法吧

13 楼 senhui19 2011-12-13  

cuizx 写道

var width=KE.g[id].width||srcTextarea.style.width||srcTextarea.offsetWidth+"px";var height=KE.g[id].height||srcTextarea.style.height||srcTextarea.offset....
楼主：，在这找不到style该怎么处理啊？？

这是因为你的<textarea>标签中没有style属性的设置，或是同个页面存在多个ID相同的<textarea>标签，请检查看看

12 楼 cuizx 2011-12-09  

var width=KE.g[id].width||srcTextarea.style.width||srcTextarea.offsetWidth+"px";var height=KE.g[id].height||srcTextarea.style.height||srcTextarea.offset....
楼主：，在这找不到style该怎么处理啊？？

11 楼 cuizx 2011-12-09  

lz 功能 正常但显示js错误

网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQDownload 677; GTB7.1; .NET CLR 2.0.50727; InfoPath.2)
时间戳: Fri, 9 Dec 2011 01:18:40 UTC


消息: 'style' 为空或不是对象
行: 1
字符: 68475
代码: 0
URI: http://localhost:8080/test/kindeditor/kindeditor3.5.6.js

10 楼 senhui19 2011-11-21  

poincare 写道

senhui19 写道

poincare 写道

楼主您好,我用的Struts2的上传方式 可是文件上传完成后,不能获取到编辑器的id,结果返回页面就报错说 服务器错误
调试得到的 编辑器id为null,求解

请注意不要使用官网的KINDEDITOR，直接使用我示例中所用的KINDEDITOR，里面有些参数我做了修改和优化 

最后调试了半天,终于明白了.
想请教一下,如何单独调用KindEditor里面的image弹出对话框

好像3.x不支持单独调用，不过你可以参考下官网4.x的单独调用方法。

9 楼 poincare 2011-11-21  

senhui19 写道

poincare 写道

楼主您好,我用的Struts2的上传方式 可是文件上传完成后,不能获取到编辑器的id,结果返回页面就报错说 服务器错误
调试得到的 编辑器id为null,求解

请注意不要使用官网的KINDEDITOR，直接使用我示例中所用的KINDEDITOR，里面有些参数我做了修改和优化 

最后调试了半天,终于明白了.
想请教一下,如何单独调用KindEditor里面的image弹出对话框

8 楼 senhui19 2011-11-18  

poincare 写道

楼主您好,我用的Struts2的上传方式 可是文件上传完成后,不能获取到编辑器的id,结果返回页面就报错说 服务器错误
调试得到的 编辑器id为null,求解

请注意不要使用官网的KINDEDITOR，直接使用我示例中所用的KINDEDITOR，里面有些参数我做了修改和优化 

7 楼 poincare 2011-11-18  

楼主您好,我用的Struts2的上传方式 可是文件上传完成后,不能获取到编辑器的id,结果返回页面就报错说 服务器错误
调试得到的 编辑器id为null,求解

6 楼 senhui19 2011-11-09  

ahmu 写道

还有一个问题，在需要使用编辑器的JSP页面，有如下配置：

<script type="text/javascript">
    KE.show({  
    id: "editorServlet",  
    resizeMode: 0,  
    allowFileManager : true,  
    imageUploadJson: "/ROOT/keplugin/KEUploadImg.servlet",  
    fileManagerJson: "/ROOT/keplugin/KEManageImages.servlet",  
    //缺省为 *.*表示所有类型文件  
    //accessoryTypes: "doc|docx",  
    accessoryUploadJson: "/ROOT/keplugin/KEUploadAttach.servlet"              
    });  
</script>

当ROOT为项目名称的时候，是可以上传附件和图片的。因为我现在使用的是tomcat服务器，需要把编译好的项目放到tomcat/wabapps/ROOT里面，也就是说没有了项目名称。这样才能通过http://localhost/直接访问。这时候不管怎么样配置，都没办法完成上传功能。

我的邮箱：[e-mail]，刚开始学JSP，望指教。

你好，修复好的插件已经发送到你的邮箱了，请查收。至于上面提到的问题，请注意下TOMCAT的解析机制，如果你把项目发布到ROOT目录下的话，直接用/代替我们原先的项目名称，即上面的文件上传路径配置为：imageUploadJson:/keplugin/KEUploadImg.servlet"其它的配置也一样修改

5 楼 ahmu 2011-10-27  

还有一个问题，在需要使用编辑器的JSP页面，有如下配置：

<script type="text/javascript">
    KE.show({  
    id: "editorServlet",  
    resizeMode: 0,  
    allowFileManager : true,  
    imageUploadJson: "/ROOT/keplugin/KEUploadImg.servlet",  
    fileManagerJson: "/ROOT/keplugin/KEManageImages.servlet",  
    //缺省为 *.*表示所有类型文件  
    //accessoryTypes: "doc|docx",  
    accessoryUploadJson: "/ROOT/keplugin/KEUploadAttach.servlet"              
    });  
</script>

当ROOT为项目名称的时候，是可以上传附件和图片的。因为我现在使用的是tomcat服务器，需要把编译好的项目放到tomcat/wabapps/ROOT里面，也就是说没有了项目名称。这样才能通过http://localhost/直接访问。这时候不管怎么样配置，都没办法完成上传功能。

我的邮箱：[e-mail]，刚开始学JSP，望指教。

4 楼 senhui19 2011-10-26  

ahmu 写道

lz,servelt模式中，对上传附件设置文件大小，配置如下：

    <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>
    <servlet-mapping> 
        <servlet-name>KEUploadAttachServlet</servlet-name> 
        <url-pattern>/keplugin/KEUploadAttach.servlet</url-pattern> 
    </servlet-mapping>
然后，在上传附件时就会提示服务器故障。去掉对文件大小的设置，则上传正常。

嗯，谢谢你的提问 ，我查看了下源码，发现是个多余的返回所造成的现已经修复好了，麻烦留下你的邮箱，我会尽快发份新的JAR包给你。

3 楼 ahmu 2011-10-23  

lz,servelt模式中，对上传附件设置文件大小，配置如下：

    <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>
    <servlet-mapping> 
        <servlet-name>KEUploadAttachServlet</servlet-name> 
        <url-pattern>/keplugin/KEUploadAttach.servlet</url-pattern> 
    </servlet-mapping>
然后，在上传附件时就会提示服务器故障。去掉对文件大小的设置，则上传正常。

2 楼 senhui19 2011-10-17  

ahmu 写道

lz,可以提供一下下载不？

已经提供了，呵呵

1 楼 ahmu 2011-10-17  

lz,可以提供一下下载不？