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

事先说明：此整合的是java版本的， 用到的有：jsp + ckeditor + ckfinder (没有servlet 及其它框架技术)

一．需要的资源：

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

a) ckeditor_3.6.2 （解压）

download.cksource.com/CKEditor/CKEditor/CKEditor
3.6.2/ckeditor_3.6.2.zip

b) ckeditor-java-3.6.2 （解压）

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

c) ckfinder_java_2.1 （解压）

download.cksource.com/CKFinder/CKFinder for
Java/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代码

1. < enabled >
   true </
   enabled >
2. < baseURL >
   /CKEditor_Finder/userfiles/ </ baseURL >

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

Xml代码

1. < servlet >
2. < servlet-name > ConnectorServlet
   </ servlet-name >
3. < servlet-class >
   com.ckfinder.connector.ConnectorServlet </ servlet-class >
4. < init-param >
5. < param-name > XMLConfig </ param-name >
6. < param-value > /WEB-INF/config.xml
   </ param-value >
7. </ init-param >
8. < init-param >
9. < param-name > debug </ param-name >
10. < param-value > false </ param-value >
11. </ init-param >
12. < load-on-startup > 1 </ load-on-startup >
13. </ servlet >
14. < servlet-mapping >
15. < servlet-name > ConnectorServlet
    </ servlet-name >
16. < url-pattern >/ckfinder/core/connector/java/connector.java</
    url-pattern >
17. </ servlet-mapping >
18. < filter >
19. <filter-name> FileUploadFilter
    </ filter-name>
20. <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
21. < init-param >
22. < param-name >sessionCookieName</param-name>
23. < param-value >JSESSIONID</ param-value >
24. </ init-param >
25. < init-param >
26. < param-name >sessionParameterName</param-name>
27. < param-value >jsessionid</param-value>
28. </ init-param >
29. </ filter >
30. < filter-mapping >
31. < filter-name > FileUploadFilter
    </ filter-name >
32. < url-pattern >/ckfinder/core/connector/java/connector.java</
    url-pattern >
33. </ filter-mapping >
34. < session-config >
35. < session-timeout > 10 </ session-timeout >
36. </ session-config >

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

Js代码

1. CKEDITOR.editorConfig = function (config)
   {
2. config.filebrowserBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html'
   ;
3. config.filebrowserImageBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images'
   ;
4. config.filebrowserFlashBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash'
   ;
5. config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'
   ;
6. config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'
   ;
7. config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'
   ;
8. config.filebrowserWindowWidth = '1000';
9. config.filebrowserWindowHeight = '700';
10. config.language = "zh-cn" ;
11. };

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

Java代码

1. <%@ page language =
   "java"
   import = "java.util.*"
   pageEncoding = "utf-8"
   %>
2. <%@ taglib uri = "http://ckfinder.com"
   prefix = "ckfinder"
   %>
3. <%@ taglib uri = "http://ckeditor.com"
   prefix = "ckeditor"
   %>
4. <%
5. String path = request.getContextPath();
6. String basePath = request.getScheme()+ "://"
   +request.getServerName()+ ":"
   +request.getServerPort()+path+ "/"
   ;
7. %>
8. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
   Transitional//EN">
9. < html >
10. < head >
11. < base href = " <%= basePath
    %> "
    >
12. < title > 首页
    </ title >
13. < meta http-equiv = "pragma" content
    = "no-cache"
    >
14. < meta http-equiv = "cache-control"
    content = "no-cache"
    >
15. < meta http-equiv = "expires"
    content = "0"
    >
16. </ head >
17. < body >
18. < form action = "getContent"
    method = "get"
    >
19. < textarea cols = "80" id =
    "editor1"
    name = "editor1" rows = "10"
    ></ textarea
    >
20. < input type = "submit" value
    = "Submit"
    />
21. </ form >
22. < ckfinder:setupCKEditor basePath =
    "/CKEditor_Finder/ckfinder/" editor
    = "editor1"
    />
23. < ckeditor:replace replace = "editor1"
    basePath = "/CKEditor_Finder/ckeditor/"
    />
24. </ body >
25. </ 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代码

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

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

Js代码

1. /*if (!B)
2. this.dV().getChild(0).appendHtml(y || z || w != 4 ? r:
3. s+ "\074\x62\x3e"+
4. htmlEncode(a.ed)+
5. "\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/

 

原文来自：http://guoliang0-0-yahoo-cn.iteye.com/blog/1195348