`
wuhongyu
  • 浏览: 405274 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

CKFinder2.x 入门

 
阅读更多

    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
踩
分享到：
| linux下搭建配置APACHE+SVN
评论
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包怎么没有人做过吗？
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics