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

【编者按】网学网网络知识频道为大家收集整理了“ckeditor用fckeditor的文件管理器实现图片上传“提供大家参考，希望对大家有所帮助!

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

1.在java web项目中集成fckeditor

　　如果你是把fckeditor升级到ckeditor的话，可以跳过这一步，否则请下载fckeditor的最终版本，然后把fckeditor文件夹复制到java web项目的webroot目录下。

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中加入以下的代码：

<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代码：

<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文档中了。如下图：