CKFinder2.x 入门

最新推荐文章于 2024-06-11 10:01:34 发布
最新推荐文章于 2024-06-11 10:01:34 发布
阅读量1k 收藏 1
点赞数
分类专栏： java web开发
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 中

Xml代码 复制代码  收藏代码
  1. <servlet>  
  2.     <servlet-name>ConnectorServlet</servlet-name>  
  3.     <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>  
  4.     <init-param>  
  5.         <param-name>XMLConfig</param-name>  
  6.         <param-value>/WEB-INF/config.xml</param-value>  
  7.     </init-param>  
  8.     <load-on-startup>1</load-on-startup>  
  9. </servlet>  
  10. <servlet-mapping>  
  11.     <servlet-name>ConnectorServlet</servlet-name>  
  12.     <url-pattern>  
  13.         /ckfinder/core/connector/java/connector.java   
  14.     </url-pattern>  
  15. </servlet-mapping>  
 

默认情况下，处于安全性考虑，CKfineder是被禁止的，要启用CKFinder，我们可以将 config.xml 中的<enabled>的值改为true。CKFinder 更推荐重写 checkAuthentication方法以达到此目的。

 

二、以 jsp tag 方式创建CKFinder实例

 

CKFinder单独使用时，可以以 jsp tag 方式创建其实例。

 

首先在jsp页面中引入CKFinder标签库

 

Java代码 复制代码  收藏代码
  1. <%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>  
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>

 

然后就可以通过如下代码在需要的位置创建一个CKFinder实例

 

Html代码 复制代码  收藏代码
  1. <ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" />  
<ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" />
 

其中，basePath 是唯一必选参数，当然也可以在此指定其他参数配置，如实例长度、宽度等

 

Java代码 复制代码  收藏代码
  1. <ckfinder:ckfinder basePath="/CKEditor_test/ckfinder/" width="700" height="500" />  
<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> 标签之前 被插入。如：

 

Html代码 复制代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>  
  3. <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>  
  4. <%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6.     <body>  
  7.         <form action="display.jsp" method="post">  
  8.             <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>                  
  9.             <input type="submit" value="Submit" />  
  10.         </form>  
  11.         <ckfinder:setupCKEditor basePath="/CKEditor_test/ckfinder/" editor="editor1" />  
  12.         <ckeditor:replace replace="editor1" basePath="/CKEditor_test/ckeditor/" />  
  13.     </body>      
  14. </html>  
<!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接受四个参数；

 

Js代码 复制代码  收藏代码
  1. 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。

 

Js代码 复制代码  收藏代码
  1. var editor = CKEDITOR.replace( 'editor1' );   
  2. CKFinder.setupCKEditor( editor, '/CKEditor_test/ckfinder/' );  

 

例2

 

第二个参数也可以为 一个包含指定配置的对象。

 

Js代码 复制代码  收藏代码
  1. var editor = CKEDITOR.replace( 'editor1' );   
  2. CKFinder.setupCKEditor( editor, { basePath : '/CKEditor_test/ckfinder/', rememberLastFolder : false } ) ;  
 

例3

 

当第一个参数为 null 时，CKFinder 可以与所有的 CKEditor 集成。

 

Js代码 复制代码  收藏代码
  1. CKFinder.setupCKEditor( null, '/CKEditor_test/ckfinder/' );   
  2. var editor = CKEDITOR.replace( 'editor1' );  
 

可以在“_samples”文件夹中查看更多的例子。


在 CKEditor 中手工集成 CKFinder

 

首先需要再页面中引入 ckeditor.js 和 ckfinder.js 文件。在创建 CKEditor 实例的时候，需要加入CKFinder 的配置。

 

Html代码 复制代码  收藏代码
  1. CKEDITOR.replace( 'editor1' ,   
  2. {   
  3.     filebrowserBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html',   
  4.     filebrowserImageBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Images',   
  5.     filebrowserFlashBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Flash',   
  6.     filebrowserUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',   
  7.     filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',   
  8.     filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',   
  9.     filebrowserWindowWidth : '1000',   
  10.     filebrowserWindowHeight : '700'   
  11. }          
  12. );  
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 设置完毕后，可以为不同类型的资源设置指定的上传子文件夹。

 

Html代码 复制代码  收藏代码
  1. CKEDITOR.replace( 'editor1' ,   
  2. {   
  3.     filebrowserBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html',   
  4.     filebrowserImageBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Images',   
  5.     filebrowserFlashBrowseUrl : '/CKEditor_test/ckfinder/ckfinder.html?type=Flash',   
  6.     filebrowserUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files<SPAN class=st0>&currentFolder=/archive/</SPAN>  
  7.   
  8.   
  9.   
  10. ',   
  11.     filebrowserImageUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images<SPAN class=st0>&currentFolder=/cars/</SPAN>  
  12.   
  13.   
  14.   
  15. ',   
  16.     filebrowserFlashUploadUrl : '/CKEditor_test/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',   
  17.     filebrowserWindowWidth : '1000',   
  18.     filebrowserWindowHeight : '700'   
  19. }          
  20. );  
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 文件夹）

shuangyidehudie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
com.ckfinder
12-28
com.ckfinder.apache-ant-zip、com.ckfinder.ckfinder、com.ckfinder.ckfinderplugin-fileeditor、com.ckfinder.ckfinderplugin-imageresize
Ckeditor3.X与ckfinder2.X整合forJAVA （支持文件上传,解决中文乱码）
09-06
在网上找了半天，看见两偏整合教程不错，把两偏整理成一偏供参考。 别人一个文档就要10分才能下，本人分不多了，扣大家5分来赚取回来。...Ckeditor3.X与ckfinder2.X整合forJAVA （支持文件上传,解决中文乱码）
探索未来内容管理：CKFinder 3 for Laravel 9+
最新发布
gitblog_00086的博客
06-11 396
探索未来内容管理：CKFinder 3 for Laravel 9+ 项目地址:https://gitcode.com/ckfinder/ckfinder-laravel-package 项目简介 欢迎来到CKFinder 3的Laravel 9+专用包的世界！这是一个高效且易用的内容管理系统集成工具，专为最新版本的Laravel框架设计。借助这个强大的工具，您可以轻松在您的应用程序中嵌入文件管理...
CKFinder2.x 入门 二
why
07-08 250
破解   CKFinder是收费的，可是我们都比较穷，用不起那么昂贵的东西，所以只能即无奈又无耻的去破解了。在http://www.imobile365.com/acticles/reviews-and-news/12-others/4551-ckeditor33ckfinder20ckf.html看到个破解办法，试了一下，果然好用，不过作为一名程序员，感情很矛盾啊，国人的破解技术还是...
在JSP里使用CKEditor和CKFinder
weixin_30713953的博客
04-01 157
在JSP里使用CKEditor和CKFinder 最近在做一个新闻发布平台，放弃了很早的FCKEditor，使用CKEditor和CKFinder，尽管免费的CKFinder是Demo版本，但是功能完整，而且用户都是比较集中精神发新闻的人，不会在意这个。按照官网的document一步一步配置，虽然并不难，但是有些东西特别分散，还是全英文的，所以...
CKFinder
66
04-27 2736
这几天把一个旧项目中的fckeditor升级为ckeditor 3.2 + ckfinder 1.4.3 组合，下面是一些升级心得:一、CKFinder的若干问题1.单独使用ckfinder从原fckeditor分离出来以后可以单独使用，通常我习惯于在工具栏中添加ckfinder.dll，这样以后要使用ckfinder直接从工具箱拖出来即可.[图片] 拖到页面中后，会形成这样一个控件实例：
ckfinder_java.jar解决2.6中没有com.ckfinder.connector.FileUploadFilter 找不到
12-12
然而，在使用CKFinder的过程中，可能会遇到版本兼容性问题，就像标题中提到的“ckfinder_java.jar解决2.6中没有com.ckfinder.connector.FileUploadFilter找不到”。 在CKFinder 2.6版本中，用户发现无法找到`...
ckfinder2.3.jar
09-26
2. **文件和目录管理**：用户可以通过CKFinder轻松浏览、上传、下载、移动、复制、重命名或删除服务器上的文件和目录，提供了直观的用户界面。 3. **图像处理**：对于图片文件，CKFinder支持缩略图预览、调整大小、...
ckfinder2.3.rar
07-20
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 -...
ckfinder2.3.zip
06-16
在"ckfinder2.3.zip"压缩包内的"com"目录下，通常会包含CKFinder的源代码文件，这些文件按照Java的包结构组织，如`com.ckfinder.connector`和`com.ckfinder.ui`等，分别对应于CKFinder的连接器和用户界面部分。...
ckfinder.rar
07-23
ckfinder插件，需要的请自行下载，直接解压引入即可使用..................................
ckfinder2.4.2
07-20
修改官方ckfinder 按照年月自动划分文件夹
ckfinder2.2.0完美破解版完整版.zip
08-09
ckfinder2.2.0完美破解版完整版.zip下载后直接就可以使用，这是一个非常好的工具，希望对你有很大的帮助，取出广告的干扰还你一个清净的界面。
CKFinder 文件管理器 v3.4.4 for asp.net
10-11
CKFinder是一个易于使用的Ajax文件管理器。提供文件夹树形结构（Folders tree）导航菜单，多语言支持（自动探测用），支持创建/重命名/删除文件和文件夹，集成FCKeditor在线编辑器。软件
ckfinder安装包
12-22
ckfinder安装包 3.用注册机生成注册码，将它们全部复制下来替换C:\\Program Files (x86)\\ArcGIS\\License10.1\\bin\\service.txt中的内容，将其中的用户名 this_host 改为自己的计算机名，如SOLAR-PC。 4.在开始菜单中打开License Server Administrator，启动服务。 5.在开始菜单中打开ArcGIS Administrator，将“许可管理器”中的Not_set改成localhost。
ckfinder使用
zhaoyanjun008的博客
12-26 3067
ckeditor环境搭建 ，请参考  JSP中使用CKEditor3.6入门教程 JSP页面使用富文本控件ckeditor提交表单数据 JSP页面使用富文本控件ckeditor自定义样式 JSP使用ckeditor和ckfinder实现富文本及上传功能 源码下载 一、下载 ckeditor下载地址为：http://ckeditor.com/download ckfind
CKFinder 介绍
WenBin_Zhou专栏
08-09 1261
http://baike.baidu.com/view/3565650.htm#1> CKFinder 简介 CKFinder是一个强大而易于使用的Web浏览器的Ajax文件管理器。 其简单的界面使得它直观，快速学习的各类用户，从高级人才到互联网初学者。 特点 文件夹树导航 ：用户直观的。质量 缩略图 ，使很快找到的东西。多语言 支持，自动用户语言检测。敏感的 上下文菜单 的文件和
ckfinder2使用教程——可能的报错解决
qq_28546559的博客
09-13 360
核心问题就是config.php的文件配置 1，配置访问权限 functionCheckAuthentication() { //只有管理员登陆后，才能上 //deng改成不要权限 returntrue; if((isset($_SESSION['AdminID'])&&$_SESSION['AdminID']>0)...
CKFinder for ASP 2.x 开发者指南中文翻译
"CKFinder for asp 2.x Developer's Guide中文版，涵盖了CKFinder的开发和配置细节，包括了解决安全警告、CKFinder 2.1 Demo的破解方法等" CKFinder是一款流行的文件管理器，专为Web应用设计，支持多种编程语言，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值