整合CKEditor和CKFinder(for java)

  1. 从http://ckeditor.com中下载ckeditor for java和ckfinder for java。

        2. 将下载的文件解压，将ckeditor文件夹和ckfinder文件夹放置到项目根目录下，其中ckfinder文件夹在ckfinder*.war中。

        3. ckfinder*.war的WEB-INF目录下有一个config.xml文件，将之放置在项目的WEB-INF目录下，打开它，并进行相应修改：

[java]  view plain copy

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作相应修改，以下是我的修改：

[java]  view plain copy

1. /* 
2. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. 
3. For licensing, see LICENSE.html or http://ckeditor.com/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 = '新细明体/PMingLiU;细明体/MingLiU;标楷体/DFKai-SB;黑体/SimHei;宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312楷体_GB2312/KaiTi_GB2312;微軟正黑體/Microsoft JhengHei;微软雅黑体/Microsoft YaHei;隶书/LiSu;幼圆/YouYuan;华文细黑/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包复制到项目中。

        6. 打开要使用ckeditor的页面，首先引入两个js：

[java]  view plain copy

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

        7. 在需要使用ckeditor的域下面添加一些代码：

[java]  view plain copy

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中添加如下代码：

[java]  view plain copy

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>  

        启动tomcat，开始体验吧。