`
wuhongyu
  • 浏览: 407322 次
  • 性别: 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.jsckfinder.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.jsckfinder.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'
}		
);

 

指定的子文件夹必须是服务器上已经存在的(如上例中 archivecars 文件夹)

 

 

 

1
0
分享到:
评论
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包怎么没有人做过吗?

相关推荐

    Ckeditor3.X与ckfinder2.X整合forJAVA (支持文件上传,解决中文乱码)

    在网上找了半天,看见两偏整合教程不错,把两偏整理成一偏供参考。 别人一个文档就要10分才能下,本人分不多了,扣大家5分来赚取回来。...Ckeditor3.X与ckfinder2.X整合forJAVA (支持文件上传,解决中文乱码)

    ckfinder_java.jar解决2.6中没有com.ckfinder.connector.FileUploadFilter 找不到

    然而,在使用CKFinder的过程中,可能会遇到版本兼容性问题,就像标题中提到的“ckfinder_java.jar解决2.6中没有com.ckfinder.connector.FileUploadFilter找不到”。 在CKFinder 2.6版本中,用户发现无法找到`...

    .NET环境下ckeditor与ckfinder配置(附ckfinder1.x注册机)

    .NET环境下ckeditor与ckfinder配置(附ckfinder1.x注册机)

    CKFinder v1.x keygen

    CKFinder v1.x keygen

    CKFinder for asp 2.x Developer's Guide中文版

    2. **修改左下角文字**:同样在`ckfinder.js`中,找到控制左下角文字显示的代码,进行删除或修改。 3. **使图片可移动**:找到限制图片移动功能的代码段,通常是`if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1)))`至`;...

    ckfinder2.3.jar

    2. **文件和目录管理**:用户可以通过CKFinder轻松浏览、上传、下载、移动、复制、重命名或删除服务器上的文件和目录,提供了直观的用户界面。 3. **图像处理**:对于图片文件,CKFinder支持缩略图预览、调整大小、...

    ckfinder2.3.zip

    在"ckfinder2.3.zip"压缩包内的"com"目录下,通常会包含CKFinder的源代码文件,这些文件按照Java的包结构组织,如`com.ckfinder.connector`和`com.ckfinder.ui`等,分别对应于CKFinder的连接器和用户界面部分。...

    ckfinder2.3.rar

    2)ckfinder-2.3.jar 3)ckfinderplugin-fileeditor-2.3.jar 4)ckfinderplugin-imageresize-2.3.jar 5)CKFinder-uuid-2.6.0.jar 6)thumbnailator-0.4.2.jar mavne安装到本地命令: mvn install:install-file -...

    com.ckfinder

    com.ckfinder.apache-ant-zip、com.ckfinder.ckfinder、com.ckfinder.ckfinderplugin-fileeditor、com.ckfinder.ckfinderplugin-imageresize

    asp使用ckeditor和ckfinder上传图片设置

    在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 ...-- #INCLUDE file="ckeditor/ckfinder/ckfinder.asp" --&gt; &lt;!-- #INCLUDE file="ckeditor/ckeditor.asp" --&gt;

    ( CKFinder-2.6.2.1.jar )

    ( CKFinder-2.6.2.1.jar ) ( CKFinder-2.6.2.1.jar ( CKFinder-2.6.2.1.jar ) v( CKFinder-2.6.2.1.jar )

    JAVA CKFinder2.6.2.1破解 去除版本信息 解决不能移动文件

    CKFinder 2.6.2.1 破解 ...(2)解决了Demo版本文件夹之间无法移动文件的限制; (3)具体可以参考: http://mungo.space/2017/05/14/remove-ckfinder-copyright/ (4)仅供学习研究使用,不得用于商业用途

    ckfinder.dll v2.3.1 for asp.net

    ckfinder.dll v2.3.1 for asp.net 破解版

    jsp中ckeditor+ckfinder整合.doc

    - ckfinder下载地址:[http://ckfinder.com/download](http://ckfinder.com/download) 下载完成后,会获得两个压缩包`ckeditor-java-3.6.1.zip`和`ckfinder_java_2.0.2.1.zip`。 ##### 步骤2:解压并部署文件 将...

    CKFinder-2.3.1.jar

    CKFinder-2.3.1.jar

    java-maven-ckfinder-2.3-jar包依赖

    接着,你可以在你的 Java 代码中通过 `import` 语句来引用 CKFinder 提供的类,例如 `com.ckfinder.connector.Connector`。 在实际应用中,CKFinder 常常与 Servlet 容器(如 Tomcat)一起使用,你可能需要在服务器...

    CKFinder所需全部jar包

    2. ckfinder-2.3.jar:这是CKFinder的主要核心库,包含了CKFinder的大部分功能实现,如文件操作、权限管理、目录结构管理等。2.3版本意味着它是该软件的稳定版,提供了对图像处理、文件预览等功能的支持。 3. ...

    ckfinder 2.2.2.1破解 ckeditor 3.6.4

    ckfinder aspnet 版本2.2.2.1 ckeditor 版本3.6.4 项目自己引用 CKFinder.dll ckfinder放在ckeditor\plugins\ckfinder 下了

    ckeditor_ckfinder_php.rar

    CKFinder 2.x则是与CKEditor配套的文件管理器,它允许用户在网页上浏览、上传、下载、删除服务器上的文件和文件夹。CKFinder支持多种文件类型,并且有良好的权限管理机制,确保了内容的安全性。与CKEditor集成后,...

    ckeditor3.5_ckfinder2.0.1.rar

    CKEditor和CKFinder是两个非常重要的Web开发工具,主要用于提高网站的内容编辑和管理效率。CKEditor是一款强大的富文本编辑器,而CKFinder则是一个文件管理器,两者常常一起使用,以提供用户友好的界面来上传、管理...

Global site tag (gtag.js) - Google Analytics