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

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

重點： 

最後，關於下載文件的使用說明：

   因爲不能上傳大文件，因此只能利用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>