当前位置: 代码迷 >> Web前端 >> CKEditor和CKFinder整合实现下传上载功能
  详细解决方案

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

热度:251   发布时间:2012-09-06 10:37:01.0
CKEditor和CKFinder整合实现上传下载功能

CKEditor CKFinder 整合并实现文件上传功能

????????? 事先说明:此整合的是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将文件分卷压缩,压缩后将一个文件压缩成多个文件
?? 解压缩方法:下载四个文件,放在同一个文件夹,随便解压一个文件(不必每个文件都解压一边,因为解压一个文件之后,其实已经解压所有的文件了)

1 楼 david.sun 2011-12-13  
麻烦问一下,我按你的方法改了,加载时弹出
行:21
错误:“CKEDITOR”未定义
的错误是怎么回事啊??
2 楼 s_yashiro 2012-02-28  
楼主感谢你!懂了很多!
3 楼 上天的败笔 2012-03-02  
david.sun 写道
麻烦问一下,我按你的方法改了,加载时弹出
行:21
错误:“CKEDITOR”未定义
的错误是怎么回事啊??

这个错误,一般情况是JS文件引用的路径问题:
下面这句话是index.jsp里面的一句话:
<ckeditor:replace replace="editor1" basePath="/CKEditorFinder/ckeditor/" />
当我修改basePath之后,就出现这样一个JS错误:
Uncaught ReferenceError: CKEDITOR is not defined

还有,看看你的index.jsp有没有base标签,在<head>下面,有没有index.jsp页面上面的:
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ; 
%> 

还有就剩下你存放的ckeditor文件夹是否放在webRoot下面………………
如果还是不行,加我Q,我给你远程调试一下……
还有就是时隔三个月才回你,我最近要找工作,得好好准备准备,之前不经常上网,都是单机………… 不要介意啊 呵呵
4 楼 老虎仔CKJ 2012-03-29  
请问如何用jsp+上述两个实现多用户的上传和下载?
5 楼 cufire 2012-05-14  
这个是不是只能上传图片啊??ckeditor和ckfinder整合可以上传文件吗??
6 楼 devcang 2012-06-26  
照着配置,一步步做,可以上传图片,但没有getContent方法
  相关解决方案