CKFinder2.x 入门

wuhongyu

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

最近访客更多访客>>

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
浏览 6379
评论(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包怎么没有人做过吗？

发表评论

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

相关推荐

起点小说解锁.js: 起点小说解锁.js

299-煤炭大数据智能分析解决方案.pptx: 299-煤炭大数据智能分析解决方案.pptx

299-教育行业信息化与数据平台建设分享.pptx: 299-教育行业信息化与数据平台建设分享.pptx

基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip: 网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。关键词：vue；MySQL；SpringBoot框架【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

时间复杂度的一些相关资源: 时间复杂度是计算机科学中用来评估算法效率的一个重要指标。它表示了算法执行时间随输入数据规模增长而变化的趋势。当我们比较不同算法的时间复杂度时，实际上是在比较它们在不同输入规模下的执行效率。时间复杂度通常用大O符号来表示，它描述了算法执行时间上限的增长率。例如，O(n)表示算法执行时间与输入数据规模n呈线性关系，而O(n^2)则表示算法执行时间与n的平方成正比。当n增大时，O(n^2)算法的执行时间会比O(n)算法增长得更快。在比较时间复杂度时，我们主要关注复杂度的增长趋势，而不是具体的执行时间。这是因为不同计算机硬件、操作系统和编译器等因素都会影响算法的实际执行时间，而时间复杂度则提供了一个与具体实现无关的评估标准。一般来说，时间复杂度越低，算法的执行效率就越高。因此，在设计和选择算法时，我们通常希望找到时间复杂度尽可能低的方案。例如，在排序算法中，冒泡排序的时间复杂度为O(n^2)，而快速排序的时间复杂度在平均情况下为O(nlogn)，因此在处理大规模数据时，快速排序通常比冒泡排序更高效。总之，时间复杂度是评估算法效率的重要工具，它帮助我们了解算法在不同输入规模下的性

安全承诺书-施工(单位版).docx: 5G通信行业、网络优化、通信工程建设资料

基于Springboot+Vue人口老龄化社区服务与管理平台-毕业源码案例设计.zip: 网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。关键词：vue；MySQL；SpringBoot框架【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

node-v12.22.6-sunos-x64.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

通信工程施工作业现场高危险源控制图集.docx: 5G通信行业、网络优化、通信工程建设资料

毕设绝技《基于小程序的交友系统的设计与实现》: 《基于小程序的交友系统的设计与实现》是一个融合了小程序技术和社交功能的毕业设计项目。该项目旨在通过开发一款小程序，为用户提供一个便捷、有趣的交友平台，满足用户寻找新朋友、拓展社交圈的需求。一、项目背景与目标随着移动互联网的普及，小程序以其轻便、易用的特性受到了广大用户的喜爱。本项目旨在利用小程序技术开发一款交友系统，通过简洁明了的界面设计和丰富多样的社交功能，吸引用户参与并提升用户体验。通过实现这一系统，旨在帮助用户拓展社交圈，增进人际关系，并推动社交领域的创新与发展。二、系统设计与功能实现用户注册与登录：系统提供用户注册与登录功能，确保用户信息的真实性和安全性。用户可以通过手机号或第三方社交账号进行注册和登录。个人资料展示：用户可以在个人资料页面展示自己的基本信息、兴趣爱好、照片等，以便其他用户了解并产生互动。附近的人：系统通过定位功能展示附近的其他用户，用户可以浏览附近的人的信息，并主动发起聊天或交友请求。聊天功能：系统提供一对一的聊天功能，用户可以与感兴趣的人进行实时交流，增进彼此的了解。活动组织：用户可以发起或参与各类线下活动，如聚会、运动、旅行

安全生产教育培训制度.doc: 5G通信行业、网络优化、通信工程建设资料

shampoo-sales.csv: shampoo-sales.csv

59-《煤矿测量规程(1989版)》150.pdf: 59-《煤矿测量规程(1989版)》150.pdf

node-v12.18.1-sunos-x64.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

node-v12.22.3-sunos-x64.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

项目代维费报价书.doc: 5G通信行业、网络优化、通信工程建设资料。

AXIS T864 系列多通道 PoE+ 同轴电缆刀片套件 AXIS T8648 PoE+ 同轴电缆刀片紧凑型套件安装指南: AXIS T864 系列多通道 AXIS T8646 PoE+ 同轴电缆刀片套件 AXIS T8648 PoE+ 同轴电缆刀片紧凑型套件安装指南

MATLAB学习个人笔记总结.7z: MATLAB学习个人笔记总结.7z

课设&大作业-毕业设计基于SSM的毕业设计论文题目审核及选题管理系统.zip: 【资源说明】【毕业设计】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用，具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习，也可作为大作业、课程设计、毕设项目、初期项目立项演示等，欢迎下载，互相学习，共同进步！

驻地网施工组织设计方案.doc: 5G通信、网络优化与通信建设

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论