CKFinder2.x 入门

wuhongyu

浏览: 406919 次
性别:
来自: 哈尔滨

最近访客更多访客>>

youngmei

maomaohou

tanchangmin

A208JASON

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java 学习笔记

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&currentFolder=/archive/



',
	filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images&currentFolder=/cars/



',
	filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
	filebrowserWindowWidth : '1000',
	filebrowserWindowHeight : '700'
}		
);

指定的子文件夹必须是服务器上已经存在的（如上例中 archive 和 cars 文件夹）

1
顶

0
踩

分享到：

CKFinder2.x 入门二 | linux下搭建配置APACHE+SVN

2011-07-08 16:04
浏览 6420
评论(8)
分类:Web前端
查看更多

8 楼 wuhongyu 2012-05-21

cufire 写道

你上面回复的那个，直接在jsp里指定baseurl，是怎么指定啊，我希望这个用户只能看见自己的文件夹，能不能设置呢？？

<%=xxx %> 这样不行么？

7 楼 cufire 2012-05-17

你上面回复的那个，直接在jsp里指定baseurl，是怎么指定啊，我希望这个用户只能看见自己的文件夹，能不能设置呢？？

6 楼 wuhongyu 2011-09-17

lovekang89 写道

求源码》》》 623362942@qq.com

不好意思，这个当时写着玩的，没留源码

5 楼 lovekang89 2011-09-13

求源码》》》 623362942@qq.com

4 楼 wuhongyu 2011-08-15

xzliulin 写道

你好，请问怎么动态指定上传地址，也就是config.xml中的
<baseDir></baseDir>
<baseURL>/</baseURL>
这两个值

好久没登陆博客了，抱歉先！不知道你说的动态指定是指什么，在配置文件中不算么？如果是指在运行时通过变量传入地址的那种，跟ckfinder就没什么关系了，直接在JSP中把变量值给他就行了，不过有一点要注意，指定的文件夹必须是服务器上已经存在的，ckfinder不能自动创建文件夹。

3 楼 wuhongyu 2011-08-15

whjzuiai 写道

都是转载的，5.2号发布的ckfinder for java版本不支持IE浏览器，要改里面jar包怎么没有人做过吗？

说转载的也没错，我基本是看它官网Developers_Guide翻译的，不过英文不好，我用firefox，不过也没发现IE有什么问题啊。

2 楼 xzliulin 2011-08-06

你好，请问怎么动态指定上传地址，也就是config.xml中的
<baseDir></baseDir>
<baseURL>/</baseURL>
这两个值

1 楼 whjzuiai 2011-07-17

都是转载的，5.2号发布的ckfinder for java版本不支持IE浏览器，要改里面jar包怎么没有人做过吗？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论