Java web 项目中使用ckeditor和ckfinder

重点汇总:

  1. 加入相关的jar包
  2. 在web.xml文件加入ckfinder 请求拦截器
  3. 配置ckfinder的配置文件：config.xml

杂谈

作为一个可视化的HTML 编辑器，最重要的一点是对于文件、图片和视频的管理，一个好的可视化的HTML 编辑器应该有很好的设计。

其他的话就不多说了，现在开始进入正题。

ckeditor和ckfinder 两个到底是干什么的？为什么要做两个？

ckeditor就是一个可视化的HTML编辑器，但是他的上传图片和视频却交给了另外的软件：ckfinder，为什么要这么做其中的好处应该看其公司吧。

ckeditor的使用

参看之前的文章。

ckfinder 的使用——“上传文件管理器”

官方发布适用于各种平台的版本，其实说白了就是：对于不同的编程语言文件上传的实现，从而就有了这几个版本了！

不同语言对于文件上传使用的框架都是不一样的，但是最终的效果是相同的。

我用的是java语言，所以就讲java的实现吧。

java实现文件上传有很多的框架，如：apache 的commons-fileupload-1.2.2、jspSmartUpload等

而CKFinder 就是封装了commons-fileupload-1.2.2并结合了相关的Ajax实现文件的管理。

在Java web 中使用ckfinder

项目背景：

maven 项目（虽然是使用maven 管理包依赖的，但是我们没必要就一定要用maven来管理所有依赖的包，也可以手动加入相关的依赖包。）

软件包：

ckfinder_java_2.4.1.zip

解压后有如下文件：

  • _sources                                    ——————〉源代码实现文件上传和配置的java源代码
  • CKFinderJava-2.4.1.war          ——————〉一个实例：其中包含了ckfinder的js 代码等
  • install.txt
  • license.txt

CKFinderJava-2.4.1.war   解压后有如下文件：

  • ckfinder               ——————〉js代码，即和ckeditor 的js代码
  • META-INF            ——————〉
  • WEB-INF             ——————〉该文件夹下的lib文件夹下的jar包很重要
  • welcome.html    ——————〉首页

开发步骤：

  1. 加入相关的jar包

    在项目的webapp/WEB-INF/lib加入所需要的jar 包

  2. 在web.xml文件加入ckfinder请求拦截器,如下:

    <span style="font-size:14px;font-weight: normal;"><!-- CKFinder 的配置 -->
	<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><!-- 指定ckfinder的配置文件 -->
		</init-param>
		<init-param>
			<param-name>debug</param-name>
			<param-value>false</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>ConnectorServlet</servlet-name>
		<url-pattern>
			/js/ckfinder/core/connector/java/connector.java<!-- 什么样的请求是交给该servlet处理的 -->
		</url-pattern>
	</servlet-mapping>
	<filter>
		<filter-name>FileUploadFilter</filter-name>
		<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
		<init-param>
			<param-name>sessionCookieName</param-name>
			<param-value>JSESSIONID</param-value>
		</init-param>
		<init-param>
			<param-name>sessionParameterName</param-name>
			<param-value>jsessionid</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>FileUploadFilter</filter-name>
		<url-pattern>
			/js/ckfinder/core/connector/java/connector.java
		</url-pattern>
	</filter-mapping>

<!-- CKFinder 的配置 --></span>

  3. 配置ckfinder 的配置文件：config.xml

<span style="font-size:14px;"><span style="font-family:Times New Roman;"><config>
	<!-- CKFinder : Configuration File - Basic Instructions In a generic usage
		case, the following tasks must be done to configure CKFinder: 1. Check the
		baseDir and baseUrl options; 2. If available, paste your license key in the
		"licenseKey" setting; 3. Enable CKFinder using the "enabled" setting. WARNING
		: DO NOT simply set "enabled" to "true" on a production site. By doing so,
		you are allowing "anyone" to upload and list the files in your server. You
		must implement some kind of session validation. http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending -->
	<enabled>true</enabled><!--将false 改为true-->
	<!-- Configure the location of uploaded files. See the following article
		for more details: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/baseURL_and_baseDir -->
	<baseDir></baseDir><!--配置上传文件保存的基本绝对路径， 即上传的文件的保存在电脑硬盘上哪个文件夹下，没试验的！-->
	<baseURL>/Article/userfiles/</baseURL><span style="font-family: Arial, Helvetica, sans-serif;"><!--配置上传文件保存的相对路径，是相对于项目的--></span>
	<!-- <baseURL>C:\userfiles</baseURL> -->
	<licenseKey></licenseKey>
	<licenseName></licenseName>
	<!-- Set the maximum size of uploaded images. If an uploaded image is larger,
		it gets scaled down proportionally. Set to 0 to disable this feature. -->
	<imgWidth>1600</imgWidth>
	<imgHeight>1200</imgHeight>
	<imgQuality>80</imgQuality>
	<!-- See the following article for more details: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/URI_Encoding -->
	<uriEncoding>UTF-8</uriEncoding>
	<!-- ResourceType : defines the "resource types" handled in CKFinder. A
		resource type is nothing more than a way to group files under different paths,
		each one having different configuration settings. Each resource type name
		must be unique. When loading CKFinder, the "type" querystring parameter can
		be used to display a specific type only. If "type" is omitted in the URL,
		the "DefaultResourceTypes" settings is used (may contain the resource type
		names separated by a comma). If left empty, all types are loaded. maxSize
		is defined in bytes, but shorthand notation may be also used. Available options
		are: G, M, K (case insensitive). 1M equals 1048576 bytes (one Megabyte),
		1K equals 1024 bytes (one Kilobyte), 1G equals one Gigabyte. Example: 'maxSize'
		=> "8M", ==============================================================================
		ATTENTION: Flash files with `swf' extension, just like HTML files, can be
		used to execute JavaScript code and to e.g. perform an XSS attack. Grant
		permission to upload `.swf` files only if you understand and can accept this
		risk. ============================================================================== -->
	<defaultResourceTypes></defaultResourceTypes>
	<types>
		<type name="Files">
			<url>%BASE_URL%files/</url>
			<directory>%BASE_DIR%files</directory>
			<maxSize>0</maxSize>
			<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip
			</allowedExtensions>
			<deniedExtensions></deniedExtensions>
		</type>
		<type name="Images">
			<url>%BASE_URL%images/</url>
			<directory>%BASE_DIR%images</directory>
			<maxSize>0</maxSize>
			<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
			<deniedExtensions></deniedExtensions>
		</type>
		<type name="Flash">
			<url>%BASE_URL%flash/</url>
			<directory>%BASE_DIR%flash</directory>
			<maxSize>0</maxSize>
			<allowedExtensions>swf,flv</allowedExtensions>
			<deniedExtensions></deniedExtensions>
		</type>
	</types>
	<!-- The session variable name that CKFinder must use to retrieve the "role"
		of the current user. The "role", can be used in the "accessControls" settings
		(bellow). -->
	<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
	<accessControls>
		<accessControl>
			<role>*</role>
			<resourceType>*</resourceType>
			<folder>/</folder>
			<folderView>true</folderView>
			<folderCreate>true</folderCreate>
			<folderRename>true</folderRename>
			<folderDelete>true</folderDelete>
			<fileView>true</fileView>
			<fileUpload>true</fileUpload>
			<fileRename>true</fileRename>
			<fileDelete>true</fileDelete>
		</accessControl>
	</accessControls>
	<thumbs>
		<enabled>true</enabled>
		<url>%BASE_URL%_thumbs/</url>
		<directory>%BASE_DIR%_thumbs</directory>
		<directAccess>false</directAccess>
		<maxHeight>100</maxHeight>
		<maxWidth>100</maxWidth>
		<quality>80</quality>
	</thumbs>
	<!-- Increases the security on an IIS web server. If enabled, CKFinder will
		disallow creating folders and uploading files whose names contain characters
		that are not safe under an IIS web server. -->
	<disallowUnsafeCharacters>false</disallowUnsafeCharacters>
	<!-- Due to security issues with Apache modules, it is recommended to leave
		the following setting enabled. How does it work? Suppose the following: -
		If "php" is on the denied extensions list, a file named foo.php cannot be
		uploaded. - If "rar" (or any other) extension is allowed, one can upload
		a file named foo.rar. - The file foo.php.rar has "rar" extension so, in theory,
		it can be also uploaded. In some conditions Apache can treat the foo.php.rar
		file just like any PHP script and execute it. If CheckDoubleExtension is
		enabled, each part of the file name after a dot is checked, not only the
		last part. In this way, uploading foo.php.rar would be denied, because "php"
		is on the denied extensions list. -->
	<checkDoubleExtension>true</checkDoubleExtension>
	<!-- Indicates that the file size (maxSize) for images must be checked only
		after scaling them. Otherwise, it is checked right after uploading. -->
	<checkSizeAfterScaling>true</checkSizeAfterScaling>
	<!-- Perform additional checks for image files if set to true, validate
		image size -->
	<secureImageUploads>true</secureImageUploads>
	<!-- For security, HTML is allowed in the first Kb of data for files having
		the following extensions only. -->
	<htmlExtensions>html,htm,xml,js</htmlExtensions>
	<!-- Force ASCII names for files and folders. If enabled, characters with
		diactric marks will be automatically converted to ASCII letters. -->
	<forceASCII>false</forceASCII>
	<!-- Folders to not display in CKFinder, no matter their location. No paths
		are accepted, only the folder name. The * and ? wildcards are accepted. ".*"
		disallows the creation of folders starting with a dot character. -->
	<hideFolders>
		<folder>.*</folder>
		<folder>CVS</folder>
	</hideFolders>
	<!-- Files to not display/upload in CKFinder, no matter their location.
		No paths are accepted, only the file name, including extension. The * and
		? wildcards are accepted. -->
	<hideFiles>
		<file>.*</file>
	</hideFiles>
	<plugins>
		<plugin>
			<name>imageresize</name>
			<class>com.ckfinder.connector.plugins.ImageResize</class>
			<params>
				<param name="smallThumb" value="90x90"></param>
				<param name="mediumThumb" value="120x120"></param>
				<param name="largeThumb" value="180x180"></param>
			</params>
		</plugin>
		<plugin>
			<name>fileeditor</name>
			<class>com.ckfinder.connector.plugins.FileEditor</class>
			<params></params>
		</plugin>
		<!-- Before enabling the watermark plugin make sure to specify path to
			source image -->
		<!-- The "internal" flag informs CKFinder that watermark is a pure server
			side plugin -->
		<!-- <plugin> <name>watermark</name> <class>com.ckfinder.connector.plugins.Watermark</class>
			<params> <param name="source" value="/path/in/servlet/context/logo.gif"></param>
			<param name="transparency" value="0.8"></param> <param name="quality" value="100"></param>
			<param name="marginRight" value="5"></param> <param name="marginBottom" value="5"></param>
			</params> <internal>true</internal> </plugin> -->
	</plugins>
	<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder
	</basePathBuilderImpl>
</config></span>
</span>

要修改的地方:

  1. <span style="font-size:14px;"><enabled>true</enabled></span>
  2. <span style="font-size:14px;"><pre name="code" class="html"><baseDir></baseDir>
<baseURL>/Article/userfiles/</baseURL></span>
    

    3. 



ckeditor 和ckfinder的整合


1、修改ckeditor 的config.js文件，即ckeditor/config.js


默认配置如下：


/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
};



修改为如下：


/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights
 *          reserved. For licensing, see LICENSE.html or
 *          http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function(config) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.language = 'zh-cn';
	config.filebrowserBrowseUrl = 'js/ckfinder/ckfinder.html';
	config.filebrowserImageBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Images';
	config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Flash';
	config.filebrowserUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
	config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
	config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
	config.filebrowserWindowHeight = '50%';// CKFinder浏览窗口高度,默认值70%，也可以赋像素值如：1000
	config.filebrowserWindowWidth = '70%';// CKFinder浏览窗口宽度,默认值80%，也可以赋像素值
};



修改部分


config.filebrowserBrowseUrl = '/Article/js/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = '/Article/js/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = '/Article/js/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = '/Article/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/Article/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/Article/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';


注意：


/Article/js/ckfinder/ckfinder.html 这里是写绝对路径的，Artilce 是项目的上下文，也就是说要将项目的上下文写死在这里，如果是写成相对路的话就会找不到相关的文件从而报404 的错误。


这些是干什么的呢？还有ckeditor/config.js这个文件是什么作用的？


2、用CKFinder.setupCKEditor()为ckeditor添加ckfinder


在jsp中将<textarea>替换为ckeditor编辑器


<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/ckfinder/ckfinder.js"></script>
<pre name="code" class="html"><script type="text/javascript">
	$(document).ready(function() {
		if (typeof CKEDITOR == 'undefined') {
			document.write('加载ckeditor失败！')
		} else {
			var editor = CKEDITOR.replace('content');
			CKFinder.setupCKEditor(editor, '/ckfinder/');
		}
	});
</script>


</pre><textarea id="content" name="content"></textarea><p></p><pre>


先开个头，以后待续……


参考如下此处


Java web 项目中使用ckeditor和ckfinder
				


				
时间： 2024-07-29 21:41:30 

		


		


	

	
	

		


		
Java web 项目中使用ckeditor和ckfinder的相关文章


								

		

			

                在java web项目中集成webservice
			

		

		

									

				公司要求在项目中加入webservice服务,因为项目中使用了spring框架,所以在这里使用与spring兼容性较好的cxf来实现 cxf所需jar包 spring的jar包就不贴了 一:创建webservice服务器 1)创建一个服务接口 package com.service; import javax.jws.WebParam; import javax.jws.WebService; @WebService public interface IHelloWorld { public S			

		

	

				

		

			

                Java Web项目中缺少Java EE 6 Libraries怎么添加
			

		

		

									

				具体步骤如下: 1.项目名称上点击鼠标右键,选择"Build Path-->Configure Build Path-->Java Build Path" 2.单击"Add Library..." 3.选择"User Library",单击"Next" 4.单击"User Libraries...",选择需要的Java EE 6 Libraries Java Web项目中缺少Java EE 6			

		

	

				

		

			

                JAVA WEB项目中各种路径的获取
			

		

		

									

				JAVA WEB项目中各种路径的获取 标签: java webpath文件路径 2014-02-14 15:04 1746人阅读 评论(0) 收藏 举报  分类: JAVA开发(41)  1.可以在servlet的init方法里 String path = getServletContext().getRealPath("/"); 这将获取web项目的全路径 例如 :E:\eclipseM9\workspace\tree\ tree是我web项目的根目录 2.你也可以随时在任意的cla			

		

	

				

		

			

                在Java Web项目中引入Mondrian多维分析框架
			

		

		

									

				一,Mondrian简介 Mondrian是一个开源项目,一个用Java写成的OLAP引擎.它用MDX语言实现查询,从关系数据库(RDBMS)中读取数据.然后经过Java API以多维的方式对结果进行展示. Mondrian的使用方式同JDBC驱动类似.可以非常方便的与现有的Web项目集成. Mondrian OLAP 系统由四个层组成,可分为从最终用户到数据中心, 顺序为: 1表现层(the presentation layer) 2维度层(the dimensional layer) 3集合			

		

	

				

		

			

                Java Web项目中连接Access数据库的配置方法
			

		

		

									

				本文是对前几天的"JDBC连接Access数据库的几种方式"这篇的升级.因为在做一些小项目的时候遇到的问题,因此才决定写这篇博客的.昨天已经将博客公布了.可是后来经过一些验证有点问题,所以今天改了一下又一次的公布了 老师决定期末考试採用access数据库实现增删改查.我觉得如今的我已经没有问题了.可是曾经都是在JSP页面中连接access数据库,不管是下面的那种方式都进行了连接的练习,可是如今我想让我的项目中的訪问access数据库的java代码,封装到DAO中,在DAO中连接数据库,			

		

	

				

		

			

                java web项目中 读取properties 路径的问题
			

		

		

									

				可以先获取项目的classPath String classPath = this.getClass().getResource("/").getPath();//获取classPath(部署到tomcat的路径上) 我的为/D:/apache-tomcat-6.0.29/webapps/demo/WEB-INF/classes/  在连接下面的路径即可 代码如下: package readproperties; import java.io.BufferedInputStream;i			

		

	

				

		

			

                实战：在Java Web 项目中使用HBase
			

		

		

									

				在此之前我们使用Mysql作为数据源,但发现这数据增长速度太快,并且由于种种原因,因此必须使用HBase,所以我们要把Mysql表里面的数据迁移到HBase中,在这里我就不讲解.不争论为什么要使用HBase,HBase是什么了,喜欢的就认真看下去,总有些地方是有用的 我们要做的3大步骤: 新建HBase表格. 把MYSQL数据迁移到HBase中. 在Java Web项目中读取HBase的数据. 先介绍一下必要的一些环境: HBase的版本:0.98.8-hadoop2 所需的依赖包: commo			

		

	

				

		

			

                理解java Web项目中的路径问题
			

		

		

									

				本文以项目部署在tomcat服务器为例,其他相信也是一样的. 先说明请求页面的写法,在web中,页面路径主要写的有以下几种 1.请求重定向 2.浏览器的请求被服务器请求到新页面(我称为“转发”) 3.超链接 4.form表单提交的action 为了演示路径写法,首先先建一个项目(项目名WebPath),并建立一个servlet(PathServlet) 目录结构如下 以访问目录中index.jsp文件为例,jxf.path.PathServlet.jave中对以上四种路径的写法(红色部分) 1			

		

	

				

		

			

                Java web项目中java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
			

		

		

									

				原来是tomcat找不到MYSQL JAR包的问题.后来又把mysql-connector-java-5.1.7-bin.jar导入到tomcat的lib目录下面就ok了,嘿…… 在java项目中,只需要引入mysql-connector-java-5.1.7-bin.jar就可以运行java项目. 在web项目中,当Class.forName("om.mysql.jdbc.Driver");时myeclipse是不会去查找字符串,不会去查找驱动的.所以只需要把mysql-connec