ckeditor用fckeditor的文件管理器实现图片上传

http://www.laokboke.com/2011/12/09/ckeditor-with-fckeditor-filemanager/

2011 年 12 月 09 日java、java web开发实例、java教程ckeditor、ckfinder、java web、在线文本编辑器老k

想把java web项目中的fckeditor在线文本编辑器升级到ckeditor，但又不想购买ckfinder来实现文件上传？老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法，只要对fckeditor的filemanager做出几处修改，就可以集成fckeditor的文件上传管理器到ckeditor中使用，可以方便在文章中插入图片及flash。

 

1.在java web项目中集成fckeditor

 

如果你是把fckeditor升级到ckeditor的话，可以跳过这一步，否则请下载fckeditor的最终版本，然后把fckeditor文件夹复制到java web项目的webroot目录下。当然，你可以直接下载本文的示例项目fckeditor文件上传管理器集成到ckeditor源代码来获得最终版本的fckeditor，而且是已经可以集成到ckeditor的fckeditor。

 

2.把java实现文件上传需要的jar复制到项目lib目录下

 

下载本文的示例项目后解压，把项目lib目录下的所有jar文件复制到你的项目的lib下面，如果不是通过myeclipse或者eclipse进行粘贴的话，你还需要把这些jar加入到项目编译路径下。

 

3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题

 

你可以直接到本文示例项目net.laokboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。

 

4.实现fckeditor的connector.userActionImpl

 

其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了

 

5.配置你的web.xml文件

 

配置上传文件的servlet，使tomcat启动的时候就加载该servlet，在web.xml中加入以下的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<servlet>

 <servlet-name>Connector</servlet-name>

 <servlet-class>

 net.laokboke.servlet.ConnectorServlet

 </servlet-class>

 <init-param>

 <param-name>baseDir</param-name>

 <param-value>/userfiles/</param-value>

 </init-param>

 <init-param>

 <param-name>debug</param-name>

 <param-value>true</param-value>

 </init-param>

 <load-on-startup>1</load-on-startup>

 </servlet>

 

 <servlet-mapping>

 <servlet-name>Connector</servlet-name>

 <url-pattern>/fckeditor/connector</url-pattern>

 </servlet-mapping>

 

6.修改fckeditor文件上传管理器的若干文件

 

这些文件全部位于fckeditor\editor\filemanager\browser\default\目录下，你只需要把本文的示例项目中同目录下的所有文件复制替换你的就可以了。

 

7.修改ckeditor的图像属性窗口js，屏蔽一些不必要的选项

 

该文件是位于ckeditor\plugins\image\dialogs\目录下的image.js文件，增加了291-293这几行代码。

 

8.在ckeditor集成fckeditor filemanager

 

其实就是在使用ckeditor时配置它的filebrowserBrowseUrl和filebrowserUploadUrl等属性，如以下js代码

1

2

3

4

5

6

7

<pre><script type="text/javascript">

CKEDITOR.replace('editor1',

{

 filebrowserBrowseUrl :'<%=path %>/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor/connector',

 filebrowserUploadUrl :'<%=path %>/fckeditor/connector?Type=Image'

});

</script></pre>

 

9.查看效果

 

把示例项目下载后，解压并加入到myeclipse工程中，然后部署到tomcat，启动tomcat，并访问demo.jsp文件就可以看到效果了，点击ckeditor插入图片的按钮，然后再点击“浏览服务器”，你就可以看到fckeditor的文件上传管理器了，当然，你可以进行创建文件夹、上传图片等操作，上传完成后选择某一张图片就可以插入到ckeditor文档中了。如下图

ckeditor使用fckeditor的文件上传管理器实现图片和flash上传