CKFinder是一款强大的基于浏览器的ajax文件管理工具,通常与CKEditor整合使用,当然也可以单独使用。CKFinder支持多种语言,官网地址为 http://ckfinder.com/ ,目前他的java版已经发布,不过不同于CKEditor,CKFinder是收费的,如果不购买license,就只能用于学习演示,不能用于商业用途,除非......(你知道的)。
一、下载及安装
http://ckfinder.com/download 选择java版下载(我下载时是2011年5月30日发布的 2.0.2.1 ),解压后可以看到里面有一个“_sources”文件夹和一个“CKFinderJava.war”的war包,我们可以部署这个war包,它里面有一些小例子和CKFinder的相关链接。然后,可以在“_sources\CKFinder for Java\WebApp\src\main\webapp”中、或者直接解压开“CKFinderJava.war”包,找到我们需要的东西,并进行如下操作:
将ckfinder文件夹拷贝到工程目录下(如WebRoot\ckfinder)
将 CKFinder WEB-INF 下的 config.xml 文件拷贝到你工程的 WEB-INF 文件夹下
将 WEB-INF/lib 中的jar包拷贝到你工程的
WEB-INF/lib下
将 CKFinder web.xml 中的配置拷贝到你工程的
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> <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>
默认情况下,处于安全性考虑,CKfineder是被禁止的,要启用CKFinder,我们可以将 config.xml
中的<enabled>的值改为true。CKFinder 更推荐重写
checkAuthentication方法以达到此目的。
二、以 jsp tag 方式创建CKFinder实例
CKFinder单独使用时,可以以 jsp tag 方式创建其实例。
首先在jsp页面中引入CKFinder标签库
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
然后就可以通过如下代码在需要的位置创建一个CKFinder实例
<ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" />
其中,basePath
是唯一必选参数,当然也可以在此指定其他参数配置,如实例长度、宽度等
<ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" width="700" height="500" />
三、集成CKEditor
有三种方式集成CKEditor,可以根据需要,任选其一。
通过<ckfinder:setupCKEditor>标签集成
使用 <ckfinder:setupCKEditor>
标签集成CKEditor时,需要确保CKFinder于CKEditor都成功安装,并且在 /WEB-INF/lib下载入了
ckeditor-java-core-3.x.jar包(可在 http://ckeditor.com/download 页面CKEditor for Java处下载zip包)。
<ckfinder:setupCKEditor>接受四个参数:
basePath - 必选参数,指定
CKFinder文件夹路径。
editor - 可选参数,要集成的
CKEditor实例的名称,如果不指定,将与当前页面中所有的CKEditor实例集成。
flashType - 可选参数,
CKFinder中“Flash”类型资源 type 的名称。
imageType
- 可选参数,
CKFinder中“Images”类型资源 type 的名称。
<ckfinder:setupCKEditor>
必须在 <ckeditor>
标签之前 被插入。如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %> <%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <form action="display.jsp" method="post"> <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> <input type="submit" value="Submit" /> </form> <ckfinder:setupCKEditor basePath="/CKEditor_test/ckfinder/" editor="editor1" /> <ckeditor:replace replace="editor1" basePath="/CKEditor_test/ckeditor/" /> </body> </html>
通过CKFinder.setupCKEditor集成
首先需要再页面中引入 ckeditor.js
和 ckfinder.js 文件。
setupCKEditor接受四个参数;
CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
editorObj -
CKEditor实例,如果不指定,将与当前页面中所有的CKEditor实例集成
config - 一个包含指定配置的对象,或者仅指定
CKFinder 的 basePath。
imageType - 当
从 Image Properties 对话框启动 CKFinder 时,type 处指定的名称。
flashType
- 当
从 Flash Properties 对话框启动 CKFinder 时,type 处指定的名称。
例1
下面的例子展现了如何将 CKFinder 与 editor1 集成并且在第二个参数处仅指定
CKFinder 的 b
ase path。
var editor = CKEDITOR.replace( 'editor1' ); CKFinder.setupCKEditor( editor, '/CKEditor_test/ckfinder/' );
例2
第二个参数也可以为 一个包含指定配置的对象。
var editor = CKEDITOR.replace( 'editor1' ); CKFinder.setupCKEditor( editor, { basePath : '/CKEditor_test/ckfinder/', rememberLastFolder : false } ) ;
例3
当第一个参数为 null 时,CKFinder 可以与所有的 CKEditor 集成。
CKFinder.setupCKEditor( null, '/CKEditor_test/ckfinder/' ); var editor = CKEDITOR.replace( 'editor1' );
可以在“_samples”文件夹中查看更多的例子。
在 CKEditor 中手工集成 CKFinder
首先需要再页面中引入 ckeditor.js
和 ckfinder.js 文件。在创建 CKEditor 实例的时候,需要加入CKFinder 的配置。
CKEDITOR.replace( 'editor1' , { filebrowserBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash', filebrowserWindowWidth : '1000', filebrowserWindowHeight : '700' } );
当在
CKEditor 的 “上传” 标签页直接向服务器上传文件时,需要设置 QuickUpload
指令参数。filebrowserUploadUrl
设置完毕后,可以为不同类型的资源设置指定的上传子文件夹。
CKEDITOR.replace( 'editor1' , { filebrowserBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files¤tFolder=/archive/ ', filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images¤tFolder=/cars/ ', filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash', filebrowserWindowWidth : '1000', filebrowserWindowHeight : '700' } );
指定的子文件夹必须是服务器上已经存在的(如上例中 archive
和 cars
文件夹)