Eclipse下配置CKEditor3.5.3+CKFinder2.0.2 【转】

   FCKEditor作为一款强大的页面编辑器已经被CKEditor取代,但是新版的CKEditor不再支持图片和文件的上传功能,需要依赖Ajax文件管理器CKFinder来实现。不过CKFinder是一款付费软件,咱们还是使用破解的吧。CKEditor for Java 最新版本是3.5.3。配置CKEditor和CKFinder分为三步进行,首先配置CKEditor,然后配置CKFinder,最后将CKFinder整合到CKEditor 中。

一、配置CKEditor3.5.3

1、在CKEditor官网http://ckeditor.com/download上下载CKEditor for Java 3.5.3 war包,里面包含了相关的jar、脚本和示例。
2、将下载的war包解压,可以放到tomcat的webapps路径下然后启动tomcat来解压,也可以使用WinRAR解压。
3、解压后把WEB-INF/lib/ckeditor-java-core-3.5.3.jar拷贝到自己工程的WEB-INF/lib路径下,把ckeditor文件夹拷贝到web工程下,我是放到webapp/js路径下。当然可以去掉ckeditor里一些无关的文件,如:INSTALL.html、LICENSE.html、_sample文件夹。
4、参考示例创建页面ckeditor.jsp。

 

view plain
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  8. <title>first use of CKEditor</title>  
  9. <link type="text/css" rel="stylesheet" href="js/ckeditor/contents.css" mce_href="js/ckeditor/contents.css" />  
  10. </head>  
  11. <body>  
  12. <textarea cols="10" id="editor1" name="editor1" rows="10">only for a test</textarea>  
  13. <ckeditor:replace  replace="editor1" basePath="js/ckeditor/"></ckeditor:replace>  
  14. </body>  
  15. </html>  

 

效果如下图:


5、配置CKEditor,可以通过编辑ckeditor文件夹下的config.js来更改CKEditor的默认配置,也可以在页面创建CKEditorConfig的实例来添加或覆盖config.js里面的配置。

config.js

 

view plain
  1. CKEDITOR.editorConfig = function( config )  
  2. {     
  3.     config.language = 'zh-cn';//语言设置  
  4.     config.uiColor='#ADE82E';//颜色  
  5.     config.width='1000px';//宽度  
  6.     config.height='400px';//高度  
  7.     config.skin='kama';//界面:kama/office2003/v2  
  8.     config.toolbar='Full';//工具栏:Full/Basic  
  9. };  

 

页面配置ckeditor.jsp:

 

view plain
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>  
  4. <%@page import="com.ckeditor.CKEditorConfig"%>  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  6. <html>  
  7. <head>  
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  9. <title>first use of CKEditor</title>  
  10. <link type="text/css" rel="stylesheet" href="js/ckeditor/contents.css" mce_href="js/ckeditor/contents.css" />  
  11. </head>  
  12. <body>  
  13. <%   
  14.     CKEditorConfig settings = new CKEditorConfig();  
  15.     settings.addConfigValue("width", "500");//宽度  
  16.     settings.addConfigValue("height", "200");//高度  
  17.     settings.addConfigValue("toolbar", "Basic");//工具栏  
  18. %>  
  19. <textarea cols="10" id="editor1" name="editor1" rows="10">only for a test</textarea>  
  20. <ckeditor:replace  replace="editor1" basePath="js/ckeditor/" config="<%= settings %>"></ckeditor:replace>  
  21. </body>  
  22. </html>  

 

效果图:

 

二、配置CKFinder 2.0.2

1、在CKFinder官网http://ckfinder.com/download下载ckfinder_java_2.0.2.zip压缩包(注意选择Java平台下的压缩包)。

2、解压压缩包ckfinder_java_2.0.2.zip,并将里面的CKFinderJava.war解压。
3、把解压后CKFinderJava文件夹中WEB-INF/lib路径下的jar拷贝到自己工程的WEB-INF/lib路径下,把ckfinder文件夹拷贝到web工程下(注:本人放到了webapp/js路径下)。
4、参考CKFinderJava里的配置,在WEB-INF路径下添加CKFinder配置文件config.xml(可以将CKFinderJava文件夹里的config.xml文件直接拷到工程下,稍加修改即可)。

config.xml

 

view plain
  1. <config>  
  2.     <enabled>true</enabled><!-- 是否启动CKFinder,默认是false,需要手动改成true -->  
  3.     <baseDir></baseDir><!-- 文件、图片存放的物理路径,会在指定路径下自动创建目录结构。最好不要设置,如果为空会在web应用根目录下创建对应的文件夹,如果设置在与CKEditor整合后根据URL找不到图片-->  
  4.     <baseURL>/ck/userfiles/</baseURL><!-- 上传文件夹的URL配置,注意:需要添加发布的项目名,不添加则无法预览,添加错了则找不到文件 -->  
  5.     <licenseKey></licenseKey>  
  6.     <licenseName></licenseName>  
  7.     <imgWidth>1600</imgWidth>  
  8.     <imgHeight>1200</imgHeight>  
  9.     <imgQuality>80</imgQuality>  
  10.     <uriEncoding>UTF-8</uriEncoding>  
  11.     <forceASCII>false</forceASCII>  
  12.     <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>  
  13.     <checkDoubleExtension>true</checkDoubleExtension>  
  14.     <checkSizeAfterScaling>true</checkSizeAfterScaling>  
  15.     <secureImageUploads>true</secureImageUploads>  
  16.     <htmlExtensions>html,htm,xml,js</htmlExtensions>  
  17.     <hideFolders>  
  18.         <folder>.svn</folder>  
  19.         <folder>CVS</folder>  
  20.     </hideFolders>  
  21.     <hideFiles>  
  22.         <file>.*</file>  
  23.     </hideFiles>  
  24.     <defaultResourceTypes></defaultResourceTypes>  
  25.     <types>  
  26.         <type name="Files">  
  27.             <url>%BASE_URL%files/</url>  
  28.             <directory>%BASE_DIR%files</directory>  
  29.             <maxSize>0</maxSize>  
  30.             <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip  
  31.             </allowedExtensions>  
  32.             <deniedExtensions></deniedExtensions>  
  33.         </type>  
  34.         <type name="Images">  
  35.             <url>%BASE_URL%images/</url>  
  36.             <directory>%BASE_DIR%images</directory>  
  37.             <maxSize>0</maxSize>  
  38.             <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>  
  39.             <deniedExtensions></deniedExtensions>  
  40.         </type>  
  41.         <type name="Flash">  
  42.             <url>%BASE_URL%flash/</url>  
  43.             <directory>%BASE_DIR%flash</directory>  
  44.             <maxSize>0</maxSize>  
  45.             <allowedExtensions>swf,flv</allowedExtensions>  
  46.             <deniedExtensions></deniedExtensions>  
  47.         </type>  
  48.     </types>  
  49.     <accessControls>  
  50.         <accessControl>  
  51.             <role>*</role>  
  52.             <resourceType>*</resourceType>  
  53.             <folder>/</folder>  
  54.             <folderView>true</folderView>  
  55.             <folderCreate>true</folderCreate>  
  56.             <folderRename>true</folderRename>  
  57.             <folderDelete>true</folderDelete>  
  58.             <fileView>true</fileView>  
  59.             <fileUpload>true</fileUpload>  
  60.             <fileRename>true</fileRename>  
  61.             <fileDelete>true</fileDelete>  
  62.         </accessControl>  
  63.     </accessControls>  
  64.     <thumbs>  
  65.         <enabled>true</enabled>  
  66.         <url>%BASE_URL%_thumbs/</url>  
  67.         <directory>%BASE_DIR%_thumbs</directory>  
  68.         <directAccess>false</directAccess>  
  69.         <maxHeight>100</maxHeight>  
  70.         <maxWidth>100</maxWidth>  
  71.         <quality>80</quality>  
  72.     </thumbs>  
  73.     <plugins>  
  74.         <plugin>  
  75.             <name>imageresize</name>  
  76.             <class>com.ckfinder.connector.plugins.ImageResize</class>  
  77.             <params>  
  78.                 <param name="smallThumb" value="90x90"></param>  
  79.                 <param name="mediumThumb" value="120x120"></param>  
  80.                 <param name="largeThumb" value="180x180"></param>  
  81.             </params>  
  82.         </plugin>  
  83.         <plugin>  
  84.             <name>fileeditor</name>  
  85.             <class>com.ckfinder.connector.plugins.FileEditor</class>  
  86.             <params></params>  
  87.         </plugin>  
  88.     </plugins>  
  89.     <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>  
  90. </config>  

 

5、在web.xml中添加支持CKFinder的Servlet。

web.xml

 

view plain
  1. <servlet>  
  2.         <servlet-name>ConnectorServlet</servlet-name>  
  3.         <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>  
  4.         <init-param>  
  5.             <param-name>XMLConfig</param-name>  
  6.             <param-value>/WEB-INF/config.xml</param-value>  
  7.         </init-param>  
  8.         <init-param>  
  9.             <param-name>debug</param-name>  
  10.             <param-value>false</param-value>  
  11.         </init-param>  
  12.         <load-on-startup>1</load-on-startup>  
  13.     </servlet>  
  14.     <servlet-mapping>  
  15.         <servlet-name>ConnectorServlet</servlet-name>  
  16.         <url-pattern><!-- 注意这里的路径要和ckfinder的放置路径保持一致 -->  
  17.             /js/ckfinder/core/connector/java/connector.java  
  18.         </url-pattern>  
  19.     </servlet-mapping>  


6、参考示例创建页面ckfinder.jsp

 

 

view plain
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  8. <title>first use of CKFinder</title>  
  9. <link type="text/css" rel="stylesheet" href="js/ckfinder/skins/kama/app.css" mce_href="js/ckfinder/skins/kama/app.css" />  
  10. <mce:script type="text/javascript" src="js/ckfinder/ckfinder.js" mce_src="js/ckfinder/ckfinder.js"></mce:script>  
  11. </head>  
  12. <body>  
  13. <p style="padding-left: 30px; padding-right: 30px;" mce_style="padding-left: 30px; padding-right: 30px;">  
  14.         <mce:script type="text/javascript"><!--  
  15.             // This is a sample function which is called when a file is selected in CKFinder.  
  16.             function showFileInfo( fileUrl, data )  
  17.             {  
  18.                 var msg = 'The selected URL is: <a href="' + fileUrl + '" mce_href="' + fileUrl + '">' + fileUrl + '</a><br /><br />';  
  19.                 // Display additional information available in the "data" object.  
  20.                 // For example, the size of a file (in KB) is available in the data["fileSize"] variable.  
  21.                 if ( fileUrl != data['fileUrl'] )  
  22.                     msg += '<b>File url:</b> ' + data['fileUrl'] + '<br />';  
  23.                 msg += '<b>File size:</b> ' + data['fileSize'] + 'KB<br />';  
  24.                 msg += '<b>Last modifed:</b> ' + data['fileDate'];  
  25.   
  26.                 // this = CKFinderAPI object  
  27.                 this.openMsgDialog( "Selected file", msg );  
  28.             }  
  29.   
  30.             var finder = new CKFinder();  
  31.             // The path for the installation of CKFinder (default = "/ckfinder/").  
  32.             finder.basePath = 'js/ckfinder/';  
  33.             // This is a sample function which is called when a file is selected in CKFinder.  
  34.             finder.selectActionFunction = showFileInfo;  
  35.             finder.create();  
  36.           
  37. // --></mce:script>  
  38.     </p>  
  39. </body>  
  40. </html>  

 

效果如图:


存在问题1:在火狐浏览器下可以成功添加文件和图片,但是在IE下操作提示错误。


参考http://www.oschina.net/question/147086_20623,然后根据Struts2的JakartaMultiPartRequest类获取文件名的方法getCanonicalName(String filename)修改,重新打包后替换原来的jar包,问题解决。
7、破解:可以看到页面上有CKFinder的提示“This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license”,本人在网上找了一个.net破解版的,将ckfinder.js文件中的aspx替换为java,然后替换工程原有的ckfinder.js就ok了。


存在问题2:HTTP Status 404-/ck/js/ckfinder/core/connector/java/connector.java

原因是在web.xml中CKFinder映射路径url-pattern配置错误,默认的是“/ckfinder/core/connector/java/connector.java”,意味着ckfinder放在web根目录下,而我的是放在webapp/js路径下,所以我的url-pattern应该是“/js/ckfinder/core/connector/java/connector.java”,如果配置错误就会提示找不到connector.java,很多人就以为ckfinder下缺少core包,其实不然。
8、也可以像CKEditor那样通过修改config.js来配置CKFinder的样式。

 

view plain
  1. CKFinder.customConfig = function( config )  
  2. {  
  3.     config.language = 'zh-cn';//语言设置  
  4.     config.width='1000px';//宽度  
  5.     config.height='400px';//高度  
  6.     config.skin='kama';//界面:kama/v1  
  7.     config.toolbar='Basic';//工具栏:Full/Basic  
  8. };  

 

三、整合CKEditor和CKFinder

可参考http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/CKEditor_Integration#Enabling_CKFinder

1、在CKEditor的配置文件config.js中添加引用CKFinder的配置。

 

view plain
  1. //配置CKFinder  
  2. config.filebrowserBrowseUrl ='js/ckfinder/ckfinder.html';  
  3. config.filebrowserImageBrowseUrl ='js/ckfinder/ckfinder.html?Type=Images';  
  4. config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Flash';  
  5. config.filebrowserUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';  
  6. config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';  
  7. config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';  
  8. config.filebrowserWindowHeight='50%';//CKFinder浏览窗口高度,默认值70%,也可以赋像素值如:1000  
  9. config.filebrowserWindowWidth='70%';//CKFinder浏览窗口宽度,默认值80%,也可以赋像素值  


2、创建一个整合页面cks.jsp

 

 

view plain
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  8. <title>CKEditor+CKFinder</title>  
  9. <link type="text/css" rel="stylesheet" href="js/ckeditor/contents.css" mce_href="js/ckeditor/contents.css" />  
  10. <mce:script type="text/javascript" src="js/ckeditor/ckeditor.js" mce_src="js/ckeditor/ckeditor.js"></mce:script>  
  11. <mce:script type="text/javascript" src="js/ckfinder/ckfinder.js" mce_src="js/ckfinder/ckfinder.js"></mce:script>  
  12. </head>  
  13. <body>  
  14.     <textarea id="editor1" name="editor1" rows="10" cols="80">  

 

效果如下图:


至此,CKEditor3.5.3+CKFinder2.0.2整合成功,工程结构如图:

四、自定义功能

1、上传文件按照时间自动重新命名。有朋友提出这个问题,以前我倒是没有注意。CKFinder默认上传的文件名和源文件名一致,如果文件名重复会自动添加编号“(1)”、“(2)”等,可见com.ckfinder.connector.handlers.command.FileUploadCommand.java的getFinalFileName方法。经过查找发现validateUploadItem(final FileItem item, final String path)方法下有一句:

view plain
  1. this.newFileName = this.fileName;  

感觉这就是问题的所在了,改写代码:

view plain
  1. String sExtentsion = FileUtils.getFileExtension(this.fileName);  
  2. SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");  
  3. this.newFileName = format.format(new Date()) + "." + sExtentsion;  

重新打包放到工程下,测试效果如下:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值