如何实现ckeditor文件上传

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现ckeditor文件上传相关的知识,希望对你有一定的参考价值。

想把java web项目中的fckeditor在线文本编辑器升级到ckeditor,但又不想购买ckfinder来实现文件上传?老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法,只要对fckeditor的filemanager做出几处修改,就可以集成fckeditor的文件上传管理器到ckeditor中使用,可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话,可以跳过这一步,否则请下载fckeditor的最终版本,然后把fckeditor文件夹复制到java web项目的webroot目录下。当然,你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的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中加入以下的代码:
<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代码
<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>
参考技术A 想把java web项目中的fckeditor在线文本编辑器升级到ckeditor,但又不想购买ckfinder来实现文件上传?老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法,只要对fckeditor的filemanager做出几处修改,就可以集成fckeditor的文件上传管理器到ckeditor中使用,可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话,可以跳过这一步,否则请下载fckeditor的最终版本,然后把fckeditor文件夹复制到java web项目的webroot目录下。当然,你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的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中加入以下的代码:
<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代码
<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>

以上是关于如何实现ckeditor文件上传的主要内容,如果未能解决你的问题,请参考以下文章

struts2整合CKEditor和CKFinder实现上传

如何将CKeditor编辑器的上传和thinkphp结合

如何在管理员中使用 django-ckeditor 在服务器上上传文件和浏览器文件?

ckeditor编辑器如何做复制图片上传(包括本地图片及远程图片),以插件方式实现

急!急!急!asp.net ckeditor3.5.3如何实现添加图片上传功能!代码越详细越好,最好可以直接运行的!

CKEditor + CKFinder (上传图片出现问题)