一、下载及安装
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>
<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" %>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
然后就可以通过如下代码在需要的位置创建一个CKFinder实例
- <ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" />
<ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" />
其中,basePath
是唯一必选参数,当然也可以在此指定其他参数配置,如实例长度、宽度等
- <ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" width="700" height="500" />
<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>
<!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] )
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/' );
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 } ) ;
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' );
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.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<SPAN class=st0>¤tFolder=/archive/</SPAN>
- ',
- filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images<SPAN class=st0>¤tFolder=/cars/</SPAN>
- ',
- filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
- filebrowserWindowWidth : '1000',
- filebrowserWindowHeight : '700'
- }
- );
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
文件夹)