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整合效果

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

评论

53 楼
feifeiyang 2012-08-30
下不下来，能否给发一份 yangfei_kingking@163.com 谢谢了。

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的项目源码发一下啊，我最近做一个东西，急需啊，万分感谢！万分感谢！415110946@qq.com

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>

41 楼
sziitjiang 2011-05-04
大哥，这次我发现真理了，原来用了struts2 不能用servlet了，不过改一下filter就OK了，哈哈，确实，要是大哥您能弄一个struts版的出来就更好啦，那就少用一个jar包了....而且，servlet的配置也挺长的，哈哈...还是谢谢啦，对了，如果您忙的话，不介意把servlet的源码共享一下吧，我们来做struts版的！反编译的效果不是很好

40 楼
sziitjiang 2011-05-03
"服务器发生故障"，怎么办？

39 楼
sziitjiang 2011-05-03
/*图片上传的SERVLET路径*/

imageUploadJson : "/JSPKindEditor/uploadImage.html",

/*图片管理的SERVLET路径*/

fileManagerJson : "/JSPKindEditor/uploadImgManager.html",

/*允许上传的附件类型*/

accessoryTypes : "doc|xls|pdf|txt|ppt|rar|zip",

/*附件上传的SERVLET路径*/

accessoryUploadJson : "/JSPKindEditor/uploadAccessory.html"

其中uploadImage.html，uploadImgManager.html，uploadAccessory.html是什么东西？望指点...文件中确实没有找到这个东东

38 楼
mienimaer 2011-04-28
我也曾经在spring mvc下整合过，只是少了附件功能和图文平排的效果。

要是能做到类似百度空间的分列排版，就更好了。

我遇到的问题是，AJAX调用KE的时候，firebug会报脚本错误，但不影响使用。

37 楼
wakqqq 2011-04-28
楼主可以给我发一份源代码吗？谢谢你了，307374319@qq.com

36 楼
jk19910410 2011-04-24
那个菜单不能正常显示中怎么办？

35 楼
com_zyq 2011-04-24
为什么图片老是上传到 /JSPKindEditor/uploadImg/ 根本就不能配置..

/*图片上传的SERVLET路径*/

imageUploadJson : "/JSPKindEditor/uploadImage.html",

/*图片管理的SERVLET路径*/

fileManagerJson : "/JSPKindEditor/uploadImgManager.html",

/*允许上传的附件类型*/

accessoryTypes : "doc|xls|pdf|txt|ppt|rar|zip",

/*附件上传的SERVLET路径*/

accessoryUploadJson : "/JSPKindEditor/uploadAccessory.html"

这个要干嘛的? "/JSPKindEditor/uploadImgManager.html",这些是在哪里的呀.

压根就找不到.(俺是新来的)

到处都是定义上传类型, 是不是很累赘啊. 在web.xml里设置, 在JSP里设置.

带面里也有设置.

34 楼
alanlhy 2011-04-24
没有源代码？

33 楼
joedenglove 2011-04-14
你用jd-gui把他的包反编译下就可以了

我在尝试改成struts2版本的，

我在struts.xml中这样配置

<package name="tools" namespace="/" extends="struts-default">

<action name="uploadImage.html" class="cn.edu.cuit.dida.common.actions.UploadImageAction">

<result name="success" type="stream">

<param name="contentType">text/html</param>

<param name="inputName">inputStream</param>

</result>

</action>

</package>

这样来返回楼主的servlet写入response的内容，请问有人这样使用了么？还有用什么可以设置这个result的编码类型？

32 楼
spiritfrog 2011-04-14
不错，图片和附件功能好用，但是从word黏贴好像会没图片，还丢失一些样式，望能提供出jar包的源代码参考。

31 楼
joedenglove 2011-04-14
这个很不错，比官方的那个demo功能强大的多，不过各有侧重，官方的demo侧重于让人会用，楼主这个功能很强大，个人非常喜欢。

不过这个是servlet版本的，楼主是否对将其改成Struts2版本有兴趣？或者是否已经做过了Struts2版本的？

我在尝试着修改成Struts2版本，不过遇到不少问题。

在您的UploadImage这个类中，是直接将上传结果，不管是alertMsg还是insertEditor是直接写入了response，但是这是写在那个返回url的？

忘楼主解答，谢谢！


30 楼
liufeikl2008 2011-04-13
呵呵，把kindeditorservlet.jar 反编译出来啊，我就是把kindeditorservlet.jar里面的代码拷贝出来，简单的修改就自己用了。

29 楼
yangpanwww 2011-04-13
楼主啊！ 能把你的源码给我么。。。你的是JDK1.6编译的...

我们有的时候还是需要自己改改...你发给我了么..我就没要写了。。。

源码源码源码源码源码源码给我。。。谢谢！

邮箱： 609865047@qq.com

谢谢！ 发现有个问题。。上传路径没有的时候应该创建..这样就没必要手动创建咯！

28 楼
凌紫冥 2011-04-07
恩，下载了，学习。谢谢了

27 楼
sjzw46673 2011-03-28
好东西，拿下用。

26 楼
maying2160 2011-03-28
把word的粘贴样式去除，这个功能很好用。这样我们那些编辑在粘word文档时就不会总出问题了

25 楼
senhui19 2011-03-27

csxk 写道
楼主，可否分享下你的kindeditorservlet.jar的源码。

呵，其实这些代码都是经KE官网下载下来修改一二而已，你也可做的到的呀，至于源码过两天完善测试好后再发吧

24 楼
csxk 2011-03-27
楼主，可否分享下你的kindeditorservlet.jar的源码。

23 楼
senhui19 2011-03-27
<div class="quote_title">ch_space 写道</div>

<div class="quote_div">提交编辑器内容后，如何自动清空？没发现API里有这个东西。。。</div>

<p> </p>

<p> 呵呵，其实API里面是有相关的实现函数的，<a href="http://www.kindsoft.net/ke/examples/demo-14.html">http://www.kindsoft.net/ke/examples/demo-14.html</a>，你再看清楚点吧(提示下可用下面的方法实现)</p>

<pre name="code" class="js">afterCreate : function(id) {}</pre>

<p> </p>

22 楼
senhui19 2011-03-27
<div class="quote_title">fengjia10 写道</div>

<div class="quote_div">做好这类js组件一个重要原则就是精简，提炼核心功能；将extention以plugin新式发布，并且提供扩展api doc.这是迈向成功的一个坚实的台阶。 <br><br>楼主的完善有几个亮点：1.去除粘贴wrod文档后的样式（这个很重要，但能不能扩展一下，是不是可以提供选择余地，同时满足两类人需要呢？）；2.上传图片压缩功能；3.还有就是一些细节的处理，比方说title的修改，文件的排序规则等。 <br><br><br>加油，国产软件因为有像你们这样的有心人而精彩！！！</div>

<p> </p>

<p> 呵呵，其实我自己用的是plugin形式，但想下那些初哥肯定又会抱怨说不会，所以就只好做成集成版的了。众口难调呀，要想做个性化的东西还是得自己动手才行</p>

21 楼
xuxiangpan888 2011-03-27
是否能粘贴word中的图片

关注很多在线编辑器

都不行，要自己开发插件

20 楼
flyingcat 2011-03-27
恩，等需用时再捣鼓下。

19 楼
xia9527 2011-03-27
下载看来看看！不知道是不是开源的！

18 楼
smallboby 2011-03-26
现在项目用的编辑器也是从fck改成KindEditor,也做了少许改动，但没lz做的好。

17 楼
sunjun 2011-03-26
以前用过这个，不过就把上传文件部分稍作改了下，LZ改的不错，特别是文件这块，顶一个

16 楼
fengjia10 2011-03-26
做好这类js组件一个重要原则就是精简，提炼核心功能；将extention以plugin新式发布，并且提供扩展api doc.这是迈向成功的一个坚实的台阶。

楼主的完善有几个亮点：1.去除粘贴wrod文档后的样式（这个很重要，但能不能扩展一下，是不是可以提供选择余地，同时满足两类人需要呢？）；2.上传图片压缩功能；3.还有就是一些细节的处理，比方说title的修改，文件的排序规则等。

加油，国产软件因为有像你们这样的有心人而精彩！！！

15 楼
hot66hot 2011-03-26 http://hot66hot.iteye.com/blog/599971
14 楼
zhouYunan2010 2011-03-26
建议美化一下头部bar。图片都太老了。而且很多功能都非常鸡肋。建议精减一些。

评论

13 楼
ch_space 2011-03-26
提交编辑器内容后，如何自动清空？没发现API里有这个东西。。。

12 楼
steafler 2011-03-26
这东西不错哟

11 楼
snowstone 2011-03-26
呵呵,前端时间也学习了一阵子KindEditor,没有楼主弄的好.学习了.

10 楼
senhui19 2011-03-26
我晕死啦，代码不是全部在DEMO里面么，自己看清楚点吧，请尊重别人的劳动成果好不。

9 楼
elvishehai 2011-03-25
有什么意思,代码也不给,

8 楼
kongzhizhen 2011-03-25

ericslegend 写道
可否增加插入代码功能

代码高亮的，可以尝试下把PJBLOG编辑器中的代码高亮插件给趴出来。也是开源的/

7 楼
wad12302 2011-03-25

jayxu 写道
求图2美女套图地址。

貌似在给某绿茶做广告

观察到重点了

6 楼
kanny87929 2011-03-25
2008年就开始在用。。。。

5 楼
fixsmall 2011-03-25
LGPL协议的，等变成MIT协议的时候再考虑

4 楼
何枫abc 2011-03-25

jayxu 写道
求图2美女套图地址。

貌似在给某绿茶做广告

高人!!!

3 楼
jayxu 2011-03-25
求图2美女套图地址。

貌似在给某绿茶做广告

2 楼
senhui19 2011-03-25
呵，这个功能在一般的门户站点运用的比较少，所以就没有集成进去。我想迟点会增添这个功能吧。


1 楼
ericslegend 2011-03-25
可否增加插入代码功能