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=http://down.chinaz.com/fckeditor/connector',
filebrowserUploadUrl : '<%=path %>/fckeditor/connector?Type=Image'
});
</script></pre>

9.查察结果

  把示例项目下载后,解压并插手到myeclipse工程中,然后陈设到tomcat,启动tomcat,并会见demo.jsp文件就可以看到结果了,点击ckeditor插入图片的按钮,然后再点击“欣赏处事器”,你就可以看到fckeditor的文件上传打点器了,虽然,你可以举办建设文件夹、上传图片等操纵,上传完成后选择某一张图片就可以插入到ckeditor文档中了。如下图:

ckeditor用fckeditor的文件解决器实现图片上传

CKEditor 在线html编辑器 v3.6.4下载

ckeditor用fckeditor的文件解决器实现图片上传

界面预览

FCKeditor v2.6.8下载

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/10315.html