CKEditor与CKFinder整合并实现文件上传功能
一．需要的资源：
a)?ckeditor_3.6.2?（解压）
b)?ckeditor-java-3.6.2?（解压）
c)?ckfinder_java_2.1?（解压）
二．执行步骤：
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> <%--<ckfinder:ckfinder?basePath="/CKFinderJava_0100/ckfinder/"?width="700"?height="500"?/>?--%> <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/
关于破解：
?
替换方框的文字为：预览图片的位置。
要替换的文件的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.js
Ckfinder.js文件的修改：
1.CKEditer/config.js文件大括号最后添加：
? ? ?config.image_previewText = "预览图片的位置！ 自己修改！！ ";
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");*/