网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

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

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/07/04

【编者按】网学网网络知识频道为大家收集整理了“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文档中了。如下图:

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

界面预览

  • 软件语言:英文
  • 运行环境:HTML
  • 软件授权:开源软件
  • 更新时间:2012-7-18 9:18:32
  • 相关链接:暂无

FCKeditor v2.6.8下载

界面预览

  • 软件语言:简体中文
  • 运行环境:ASP/PHP/JSP/asp.net/cgi
  • 软件授权:免费版
  • 更新时间:2012-8-7 9:29:56
  • 相关链接:暂无

本文转自:老K博客

网学推荐

免费论文

原创论文

设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号