CKEditor跟CKFinder整合实现上传下载功能(*)

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

一．需要的资源：

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

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代码??

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. ????????????????????????????????????????????????????????????i.htmlEncode(a.ed)+?
5. ????????????????????????????????????????????????????????????"\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/??