文档章节

CKEditor和CKFinder整合实现上传下载功能

jxlgzwh
 jxlgzwh
发布于 2013/03/06 16:41
字数 1005
阅读 694
收藏 15
  事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 

一.需要的资源:

用到的网站,文件自己下载:

a) ckeditor_3.6.2 (解压)

download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zip 

b) ckeditor-java-3.6.2 (解压)

download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.2/ckeditor-java-3.6.2.war

c) ckfinder_java_2.1 (解压)

download.cksource.com/CKFinder/CKFinder%20for%20Java/2.1/ckfinder_java_2.1.zip

二. 执行步骤:

1. MyEclipse新建 Web Project : CKEditor_Finder

2. 复制以下文件夹到WebRoot 下面:

ckfinder_java_2.1\ckfinder\ CKFinderJava \ckfinder

注意:CKFinder 加粗的是 war 包解压后的文件夹的名称

ckeditor_3.6.2/ckeditor

3. 复制 CKFinder配置文件 到WEB-INF 下面:

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml

4. 复制下面文件夹下面所有jar 文件到 WEB-INf/lib 下面:

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib

ckeditor-java-3.6.2\WEB-INF\lib

三. 下面删除无用的文件

首先是ckeditor 下面的文件:

_sample,_source, CHANGES.html, ckeditor_php4.php ,  ckeditor_php5.php, 

ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html

然后是ckfinder 下面的文件:

_samples, help, changelog.txt, install.txt, license.txt, translation.txt

四. 修改配置文件config.xml


< enabled > true </ enabled >  
    < baseURL > /CKEditor_Finder/userfiles/ </ baseURL >

五. 在web.xml 中增加如下代码:


< servlet >  
   < servlet-name > ConnectorServlet </ servlet-name >  
   < servlet-class > com.ckfinder.connector.ConnectorServlet </ servlet-class >  
   < init-param >  
        < param-name > XMLConfig </ param-name >  
        < param-value > /WEB-INF/config.xml </ param-value >  
    </ init-param >  
    < init-param >  
          < param-name > debug </ param-name >  
          < param-value > false </ param-value >  
     </ init-param >  
< load-on-startup > 1 </ load-on-startup >  
</ servlet >  
 < servlet-mapping >  
        < servlet-name > ConnectorServlet </ servlet-name >  
       < url-pattern >/ckfinder/core/connector/java/connector.java</ url-pattern >  
</ servlet-mapping >  
< filter >  
<filter-name> FileUploadFilter </ filter-name>   
    <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>  
                 < init-param >  
                     < param-name >sessionCookieName</param-name>  
                     < param-value >JSESSIONID</ param-value >  
                 </ init-param >  
                 < init-param >  
                     < param-name >sessionParameterName</param-name>  
                     < param-value >jsessionid</param-value>  
                 </ init-param >  
</ filter >  
< filter-mapping >  
        < filter-name > FileUploadFilter </ filter-name >  
        < url-pattern >/ckfinder/core/connector/java/connector.java</ url-pattern >  
</ filter-mapping >  
< session-config >  
< session-timeout > 10 </ session-timeout >  
</ session-config >

六. 修改ckeditor/config.js文件的内容

CKEDITOR.editorConfig =  function (config) {  
    config.filebrowserBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html' ;  
    config.filebrowserImageBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;  
    config.filebrowserFlashBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash' ;  
    config.filebrowserUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;  
    config.filebrowserImageUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;  
    config.filebrowserFlashUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;  
    config.filebrowserWindowWidth = '1000';  
    config.filebrowserWindowHeight = '700';  
    config.language =  "zh-cn" ;  
};

七. 修改index.jsp文件的内容如下:

<%@   page   language = "java"   import = "java.util.*"   pageEncoding = "utf-8" %>  
<%@   taglib   uri = "http://ckfinder.com"   prefix = "ckfinder"   %>  
<%@   taglib   uri = "http://ckeditor.com"   prefix = "ckeditor"   %>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;  
%>  
<! DOCTYPE   HTML  PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN">  
< html >  
   < head >  
     < base   href = " <%= basePath %> " >  
     < title > 首页 </ title >  
< meta   http-equiv = "pragma"   content = "no-cache" >  
< meta   http-equiv = "cache-control"   content = "no-cache" >  
< meta   http-equiv = "expires"   content = "0" >  
</ head >  
   < body >  
< form   action = "getContent"   method = "get" >  
    < textarea   cols = "80"   id = "editor1"   name = "editor1"   rows = "10" ></ textarea >  
    < input   type = "submit"   value = "Submit"   />  
</ form >  
< ckfinder:setupCKEditor   basePath = "/CKEditor_Finder/ckfinder/"   editor = "editor1"   />  
< ckeditor:replace   replace = "editor1"   basePath = "/CKEditor_Finder/ckeditor/"   />  
</ body >  
</ html >

http://localhost/CKEditor_Finder/

很可能或者可以说是肯定:您在访问之后操作的时候,不会像在我视频里面的那样顺利,尤其是关于中文问题,其中有一个重要的操作上面没有提及:
这个操作就是:找到Tomcat/config/server.xml  
<Connector port="80" protocol="HTTP/1.1" 
               connectionTimeout="20000" 
               redirectPort="8443" URIEncoding="utf-8" />
这个设置中的URIEncoding 是为了在访问的时候,即使访问路径中出现中文也能正常访问.  如果还有其他问题,可以发贴继续交流一下^_^

关于破解:

替换预览图片方框的文字为:预览图片的位置。

要替换的文件的位置:/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.js

Ckfinder.js 文件的修改:

1. CKEditer/config.js文件大括号最后添加: 

     config.image_previewText = "预览图片的位置! 自己修改!! ";

(以下修改的文件均为:ckfinder/ckfinder.js文件)

2. return  a.bF.length > 0 && A.indexOf(a.bF.substr(0, 9)) != -1  改为return false;

3.注释这一部分,这样,在上传一中图片之后,中间就不会有提示了

/*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) { 
    P.mj = J; 
    S = 1; 
} 
if ((P.eu && !T || S) && P.mj) { 
     Q.addClass('files_message');   
     this.tools.of().setHtml(P.mj); 
}*/

4. 注释掉这个部分:这样,左下角的东西就看不见了

/*if (!B) 
        this.dV().getChild(0).appendHtml(y || z || w != 4 ? r:  
                                                                s+ "\074\x62\x3e"+ 
                                                                i.htmlEncode(a.ed)+ 
                                                                "\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/
重点: 
最后,关于下载文件的使用说明:
   由于不能上传大文件,所以只能利用winrar将文件分卷压缩,压缩后将一个文件压缩成多个文件
   解压缩方法:下载四个文件,放在同一个文件夹,随便解压一个文件(不必每个文件都解压一边,因为解压一个文件之后,其实已经解压所有的文件了)
 
 
注意:SSH下图片上传没反应的话

 <filter-mapping>
  <filter-name>Struts2</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
改成
 <filter-mapping>
  <filter-name>Struts2</filter-name>
  <url-pattern>*.action</url-pattern>
  </filter-mapping>












本文转载自:http://www.cnblogs.com/yezhenhan/archive/2011/12/10/2282986.html

上一篇: 自增长
jxlgzwh
粉丝 56
博文 343
码字总数 164180
作品 1
深圳
程序员
私信 提问
PHP中配置Ckeditor+Ckfinder 完成图片上传

用久了fckeditor,看惯了其略显陈旧的界面,听说其弟弟CKeditor更酷更炫,今天就来试试吧。CKeditor文件下载:http://ckeditor.com/download ,目前的最新版本是CKEditor 3.4.2。 CKeditor是...

冯京宝
2012/07/20
1K
0
php 中Ckeditor 和Ckfinder的配置

CKeditor文件下载:http://ckeditor.com/download CKfinder文件下载::http://ckfinder.com/download 页面引用CKeditor,关键代码如下 <script type="text/javascript" src="ckeditor/ckedi......

Dorje
2012/03/02
524
0
在JSP里使用CKEditor4.4和CKFinder2.4

最近在做一个新闻发布平台,放弃了很早的FCKEditor,使用CKEditor和CKFinder,尽管免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个。按照官网的...

一枚Sir
2014/05/30
324
0
将CKEditor.NET和CKFinder.NET封装成一个控件

如题,直入主体: 1、去CKEditor官方网站下载CKEditor.NET和CKFinder.NET两个控件。 2、新建一个类库工程,并引入相应的程序集,在项目中新建CKEditor.NET和CKFinder.NET两个文件夹,并把相应...

easonjim
2013/05/15
0
0
CKEditor与 CKFinder 整合并实现文件上传功能

事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder 在项目中我们使用了FckEditor,但最新又出来了个ckEditor,到官方网站看看才知道FckEditor在2.6版本之后就改名为ckE...

simpler
2014/03/20
313
0

没有更多内容

加载失败,请刷新页面

加载更多

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
27分钟前
3
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部