CKEditor4與CKFinder_2.3整合_for_java

CKEditor是我們喜愛的FCKeditor的一個完全重寫版本，FCKeditor經過了6年的發展，取得了很大的成功。並不是說FCKeditor做的不好，而是我們可以帶來更新的東西，CKEditor就是。在CKEditor上面，我們引入了幾十個新特性。

CKEditor加載更快更方便使用。開發團隊更加專注帶來最佳的性能，使用各種現代的最佳做法。你會驚訝於他的表現。

您會注意到，他還有一個在Kama皮膚的基礎上的一個全新的用戶界面。Kama的豐富多彩就像變色龍一樣，這樣你就可以精確按您的需求匹配的顏色。這是一種創新的和獨特的功能，你會發現只有在CKEditor纔有。

CKEditor代碼也與以前大大不同了。這取決於新的JavaScript開發的最新要求，提供了豐富而強大的集成和互動的API。該編輯器是完全基於插件的，他可以擴展和所有部件以符合所有需求。

第一步：工具下載：

1、下載CKEditor:

官網地址：http://ckeditor.com/

2、下載CKFinder:

    官網地址：http://cksource.com/ckfinder

第二步：整合CKEditor

   1、解壓ckeditor_4.0.1_full.zip，在WebRoot下新建ckedtitor文件夾，把解壓後的文件拷貝過來；

                  samples文件夾、CHANGES.md、LICENSE.md、README.md可以刪掉，

                 其中lang文件夾下只保留en.js和zh-cn.js即可，plugins\a11yhelp\dialogs\lang文件夾下的也同樣，刪掉除en.js和zh-cn.js之外的文件。

         2、此外如果需要和Jquery整合，還需要adapters文件夾中的jquery.js，關於adapters文件夾在4.0.1版本中沒有，在3.6.4版本for java 中可以下載到

         3、修改ckeditor文件夾下的config.js文件代碼如下：

CKEDITOR.editorConfig = function( config ) {

    // Define changes todefault configuration here. For example:

    config.language = 'zh-cn'; //配置語言

    //添加中文字體

    config.font_names='宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;華文中宋/華文中宋;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;'+ config.font_names;

    

    // config.uiColor ='#FFF'; //背景顏色

    // config.width = 400;

    //寬度    // config.height = 400;

    //高度    // config.skin = 'v2';

    //編輯器皮膚樣式    // 取消 “拖拽以改變尺寸”功能

    //config.resize_enabled = false;

    // 使用基礎工具欄

    // config.toolbar ="Basic";

    // 使用全能工具欄

    config.toolbar = "Full";

    //使用自定義工具欄

    // config.toolbar =

    // [

    // ['Source','Preview', '-'],    

    // ['Cut', 'Copy','Paste', 'PasteText', 'PasteFromWord', ],   

    // ['Undo', 'Redo','-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

    // ['Image', 'Flash','Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],

    // '/',    

    // ['Bold', 'Italic','Underline', '-', 'Subscript', 'Superscript'],    

    // ['NumberedList','BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],    

    // ['JustifyLeft','JustifyCenter', 'JustifyRight', 'JustifyBlock'],    

    // ['Link', 'Unlink','Anchor'],   

    // '/',    

    // ['Format', 'Font','FontSize'],    

    // ['TextColor','BGColor'],    

    // ['Maximize','ShowBlocks', '-', 'About']    

    // ];   

    // 在 CKEditor 中集成 CKFinder注意 ckfinder 的路徑選擇要正確。    

    config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html',   

    config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images',   

    config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash',   

    config.filebrowserUploadUrl = '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files',   

    config.filebrowserImageUploadUrl = '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images',   

    config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash',   

    config.filebrowserWindowWidth = '1000',  config.filebrowserWindowHeight = '700' ;

};

 

    4、去掉默認的上傳圖片那一大段文字提示

打開plugins\image\dialogs\image.js

文件，找到

c.config.image_previewText||" Lorem ipsum dolor sit amet, consectetueradipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diampurus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum laciniatortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sedornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, temporid, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duisvelit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesqueegestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem,in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, estut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nuncnonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Utultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquetturpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor utipsum egestas elementum. Nunc imperdiet gravida mauris."

 

這後面一大堆代碼，改成c.config.image_previewText||"”

第三步 整合CKFinder

    1、解壓ckfinder_java_2.3.zip，在WebRoot下新建ckfinder文件夾,在解壓後的文件夾中找到ckfinder\_sources\CKFinder forJava\WebApp\src\main\webapp\ckfinder文件夾，拷貝到目標文件夾下；

3、samples文件夾、changelog.txt、install.txt、license.txt、translations.txt可以刪掉， lang包中，刪掉除en.js和zh-cn.js之外的文件；

4、解壓ckeditor-java-3.6.4.war，把CKFinderJava\WEB-INF\lib下的

拷貝到項目的lib下。

5、把配置文件config.xml、web.xml也拷貝到WebRoot/WEB-INF下

打開config.xml第二行的<enabled>false</enabled>換成<enabled>true</enabled>第四行的<baseURL>/CKFinderJava/userfiles/</baseURL>換成

<baseURL>/你的項目名稱/userfiles/</baseURL>

    6、配置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>

 

記得以上代碼要寫在spring和struts2之前.

    7、如果與struts2集成，需要改寫filter

新建一個Struts2Filter類：

publicclassStruts2Filter extends StrutsPrepareAndExecuteFilter { @Override
   publicvoid doFilter(ServletRequestreq, ServletResponse res, FilterChain fc)
         throws IOException,ServletException {
      HttpServletRequestrequest = (HttpServletRequest) req;
      StringfilterURL = request.getRequestURI();
      if ("/DRTS/ckfinder/core/connector/java/connector.java".equals(filterURL)) {
         try {
            fc.doFilter(req,res);
         }catch(Exception e) {
         }
      }else{
         super.doFilter(req, res, fc);
      }
   }
}

 

在web.xml文件中

<!-- 定義Struts2的核心Filter -->

   <filter>

     <filter-name>struts2</filter-name>

      <filter-class>

         com.sssss.common.filter.Struts2Filter//類路徑

      </filter-class>

   </filter>

   <!--讓Struts2的核心Filter攔截所有請求 -->

  <filter-mapping>

     <filter-name>struts2</filter-name>

     <url-pattern>/*</url-pattern>

  </filter-mapping>

 

8、破解

ckfinder/ckfinder.js刪除三處js代碼：

 第一處：刪除

if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(J)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))x.app.msgDialog('',"\124\x68\x69\x73\040\x66\165\156\143\164\x69\157\x6e\040\x69\163\x20\x64\x69\163\141\142\x6c\x65\x64\x20\x69\156\040\x74\x68\x65\x20\144\145\x6d\x6f\x20\x76\145\x72\x73\x69\157\156\040\x6f\146\x20\103\113\x46\x69\156\x64\145\162\x2e\x3c\x62\162\x20\057\x3e\x50\x6c\145\x61\x73\x65\040\x76\x69\163\151\164\x20\x74\150\145\x20\x3c\x61\x20\150\x72\x65\x66\x3d\x27\x68\x74\x74\x70\x3a\x2f\057\x63\153\x66\x69\x6e\x64\x65\162\056\143\157\155\047\076\103\113\106\x69\x6e\144\x65\x72\x20\167\145\142\x20\163\x69\x74\x65\074\x2f\141\076\x20\x74\x6f\040\x6f\x62\x74\141\151\156\x20\x61\x20\x76\x61\x6c\x69\144\040\154\x69\x63\145\x6e\163\145\056");else

作用：圖片可移動到其他文件夾

第二處：改成varp="\x20",q="\x20",r=p,s=p;

varp="\074\x64\151\166\040\x63\154\x61\x73\x73\x3d\x27\166\151\x65\x77\040\164\157\157\x6c\137\160\141\156\x65\154\x27\040\x73\164\171\x6c\145\x3d\x27\x70\141\x64\x64\x69\156\x67\072\x32\x70\x78\x3b\x64\151\163\160\x6c\141\x79\x3a\142\x6c\157\x63\x6b\040\041\151\155\160\x6f\162\164\x61\x6e\164\x3b\160\x6f\x73\151\x74\x69\x6f\x6e\072\163\164\x61\164\x69\143\040\x21\151\155\160\x6f\162\164\x61\156\164\x3b\143\157\x6c\157\x72\x3a\x62\154\141\143\153\x20\041\151\155\160\x6f\x72\x74\x61\156\x74\073\142\x61\x63\153\147\x72\x6f\x75\156\x64\x2d\143\157\154\x6f\162\x3a\x77\x68\151\164\145\040\041\151\x6d\160\x6f\162\164\141\x6e\164\073\047\076",q="\074\057\x64\x69\166\x3e",r=p+"\124\x68\x69\163\x20\151\x73\040\164\x68\145\x20\x44\x45\x4d\x4f\x20\x76\x65\162\x73\x69\157\x6e\x20\157\146\040\x43\113\x46\x69\156\x64\145\x72\056\x20\120\x6c\x65\x61\163\x65\040\x76\151\163\151\164\x20\164\150\x65\040\074\x61\x20\x68\162\145\x66\075\x27\150\164\164\x70\072\x2f\x2f\x63\153\146\x69\156\x64\x65\162\056\x63\157\x6d\047\x20\164\x61\x72\147\x65\164\x3d\047\137\142\x6c\141\156\x6b\x27\x3e\103\113\x46\x69\156\x64\x65\x72\x20\167\145\142\040\163\x69\x74\145\x3c\x2f\141\x3e\x20\x74\157\x20\x6f\x62\164\x61\151\x6e\040\141\040\x76\x61\x6c\x69\x64\040\x6c\x69\x63\145\x6e\x73\x65\x2e"+q,s=p+"\103\x4b\x46\x69\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\160\x65\x72\040\114\x69\x63\x65\156\163\x65\074\142\162\x2f\076\114\151\x63\145\x6e\x73\x65\x64\040\164\157\x3a\x20";

作用：圖片列表左下角的信息就不見了。

第三處：修改

if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj);}

改成：

if((T.eu&&!Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}

作用：文件列表上方顯示的Thisis the DEMO version of CKFinder. Please visit the CKFinder web site to obtain avalid license.將被隱藏，且不會隱藏其他提示。網上有建議直接隱藏<h4class="message_content"></h4>本人並不建議那樣做。

 

第四步：在jsp頁面中調用

1、在head中包含：

<script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script>
<script type="text/javascript"src="<%=basePath%>ckeditor/adapters/jquery.js"></script>
<script type="text/javascript"src="<%=basePath%>ckfinder/ckfinder.js"></script>

 

2、jsp頁面html代碼

   <div>
      <textarea id="editor1" name="editor1"></textarea>
   </div>

 

3、jquery方式調用

$("#editor1").ckeditor();

 

以上整合完畢，簡單吧，希望與本文能對君有所幫助.