电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

整合CKEditor和CKFinder(for java)

 menghaiying10 2016-05-30

        1. 從http://中下載ckeditor for Java和ckfinder for java。

        2. 將下載的文件解壓，將ckeditor文件夾和ckfinder文件夾放置到項(xiàng)目根目錄下，其中ckfinder文件夾在ckfinder*.war中。

        3. ckfinder*.war的WEB-INF目錄下有一個(gè)config.xml文件，將之放置在項(xiàng)目的WEB-INF目錄下，打開它，并進(jìn)行相應(yīng)修改：

  1. <config>  
  2.     <enabled><span>true</span></enabled><!--是否開啟圖片上傳功能--!>  
  3.     <baseDir></baseDir>  
  4.     <baseURL><span>/ruisystem/userfiles/</span></baseURL><!--圖片上傳后的位置-->  
  5.     <licenseKey></licenseKey>  
  6.     <licenseName></licenseName>  
  7.     <imgWidth>1600</imgWidth>  
  8.     <imgHeight>1200</imgHeight>  
  9.     <imgQuality>80</imgQuality>  
  10.     <uriEncoding><span>UTF-8</span></uriEncoding><!--編碼-->  
  11.     <forceASCII>false</forceASCII>  
  12.         <disallowUnsafeCharacters>false</disallowUnsafeCharacters>  
  13.     <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>  
  14.     <checkDoubleExtension>true</checkDoubleExtension>  
  15.     <checkSizeAfterScaling>true</checkSizeAfterScaling>  
  16.     <secureImageUploads>true</secureImageUploads>  
  17.     <htmlExtensions>html,htm,xml,js</htmlExtensions>  

        4. 打開ckeditor/config.js作相應(yīng)修改，以下是我的修改：
  1. /* 
  2. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. 
  3. For licensing, see LICENSE.html or http:///license 
  4.  */  
  5.   
  6. CKEDITOR.editorConfig = function(config) {  
  7.     // Define changes to default configuration here. For example:  
  8.     // config.language = 'fr';  
  9.     // config.uiColor = '#AADC6E';  
  10.     config.height = '700px';  
  11.     config.font_names = '新細(xì)明體/PMingLiU;細(xì)明體/MingLiU;標(biāo)楷體/DFKai-SB;黑體/SimHei;宋體/SimSun;新宋體/NSimSun;仿宋/FangSong;楷體/KaiTi;仿宋_GB2312/FangSong_GB2312楷體_GB2312/KaiTi_GB2312;微軟正黑體/Microsoft JhengHei;微軟雅黑體/Microsoft YaHei;隸書/LiSu;幼圓/YouYuan;華文細(xì)黑/STXihei;華文楷體/STKaiti;華文宋體/STSong;華文中宋/STZhongsong;華文仿宋/STFangsong;方正舒體/FZShuTi;方正姚體/FZYaoti;華文彩云/STCaiyun;華文琥珀/STHupo;華文隸書/STLiti;華文行楷/STXingkai;華文新魏/STXinwei;'  
  12.             + config.font_names;  
  13. };  
        5. 將ckeditor-java-core-v.jar和ckfinder*.war的WEB-INF/lib目錄下的所有jar包復(fù)制到項(xiàng)目中。

        6. 打開要使用ckeditor的頁面，首先引入兩個(gè)js：

  1. <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>  
  2. <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>  

        7. 在需要使用ckeditor的域下面添加一些代碼：
  1. <textarea rows="2" cols="2" name="content" id="content"></textarea>   
  2. <script type="text/javascript">  
  3. if (CKEDITOR.instances['content']) {  
  4.     CKEDITOR.remove(CKEDITOR.instances['content']);  
  5. }  
  6.   
  7. var basePath = '你的位置';  
  8.   
  9. CKEDITOR  
  10.         .replace(  
  11.                 'content',  
  12.                 {  
  13.                     filebrowserBrowseUrl : basePath  
  14.                             + '/ckfinder/ckfinder.htm',  
  15.                     filebrowserImageBrowseUrl : basePath  
  16.                             + '/ckfinder/ckfinder.htm?type=Images',  
  17.                     filebrowserFlashBrowseUrl : basePath  
  18.                             + '/ckfinder/ckfinder.htm?type=Flash',  
  19.                     filebrowserUploadUrl : basePath  
  20.                             + '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',  
  21.                     filebrowserImageUploadUrl : basePath  
  22.                             + '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',  
  23.                     filebrowserFlashUploadUrl : basePath  
  24.                             + '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',  
  25.                     filebrowserWindowWidth : '1000',  
  26.                     filebrowserWindowHeight : '1000'  
  27.                 });  
  28. </script>  

        8. 在web.xml中添加如下代碼：
  1. <filter>  
  2.     <filter-name>FileUploadFilter</filter-name>  
  3.     <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>  
  4.     <init-param>  
  5.         <param-name>sessionCookieName</param-name>  
  6.         <param-value>JSESSIONID</param-value>  
  7.     </init-param>  
  8.     <init-param>  
  9.         <param-name>sessionParameterName</param-name>  
  10.         <param-value>jsessionid</param-value>  
  11.     </init-param>  
  12. </filter>  
  13. <filter-mapping>  
  14.     <filter-name>FileUploadFilter</filter-name>  
  15.     <url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>  
  16. </filter-mapping>  
  17. <servlet>  
  18.     <servlet-name>ConnectorServlet</servlet-name>  
  19.     <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>  
  20.     <init-param>  
  21.         <param-name>XMLConfig</param-name>  
  22.         <param-value>/WEB-INF/config.xml </param-value>  
  23.     </init-param>  
  24.     <init-param>  
  25.         <param-name>debug</param-name>  
  26.         <param-value> false </param-value>  
  27.     </init-param>  
  28.     <load-on-startup> 1 </load-on-startup>  
  29. </servlet>  
  30. <servlet-mapping>  
  31.     <servlet-name>ConnectorServlet</servlet-name>  
  32.     <url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>  
  33. </servlet-mapping>  

        啟動(dòng)tomcat，開始體驗(yàn)吧。

    本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多