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

Xml代码

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

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

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文件的内容

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文件的内容如下：

Java代码

<%@ 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.注释这一部分，这样，在上传一中图片之后，中间就不会有提示了

Js代码

/*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. 注释掉这个部分：这样，左下角的东西就看不见了

Js代码

/*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>

posted @ 2011-12-10 00:55 夜真寒阅读(11902) 评论(1) 编辑收藏举报

刷新页面返回顶部

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

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