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

2013-08-04

CKEditor和CKFinder整合实现上传下载功能(*)转自：http://guoliang0-0-yahoo-cn.iteye.com/blog/1195348CKE

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

转自：http://guoliang0-0-yahoo-cn.iteye.com/blog/1195348

CKEditor和CKFinder整合实现上传下载功能博客分类：

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");*/??

热点排行

Web前端

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