CKFinder2.x 入门

最新推荐文章于 2015-12-04 23:42:13 发布

download11985

最新推荐文章于 2015-12-04 23:42:13 发布

阅读量229

点赞数

分类专栏： java 学习笔记文章标签： java xhtml web.xml

java 学习笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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 文件夹）

download11985

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CKFinder2.x 入门

CKFinder是一款强大的基于浏览器的ajax文件管理工具，通常与CKEditor整合使用，当然也可以单独使用。CKFinder支持多种语言，官网地址为 http://ckfinder.com/，目前他的java版已经发布，不过不同于CKEditor，CKFinder是收费的，如果不购买license，就只能用于学习演示，不能用于商业用途，除非......（你知道的）。一、...
复制链接

扫一扫

专栏目录