整合CKEditor和CKFinder(for java)

        1. 从http://ckeditor.com中下载ckeditor for java和ckfinder for java。

        2. 将下载的文件解压,将ckeditor文件夹和ckfinder文件夹放置到项目根目录下,其中ckfinder文件夹在ckfinder*.war中。

        3. ckfinder*.war的WEB-INF目录下有一个config.xml文件,将之放置在项目的WEB-INF目录下,打开它,并进行相应修改:

<config>
	<enabled>true</enabled><!--是否开启图片上传功能--!>
	<baseDir></baseDir>
	<baseURL>/ruisystem/userfiles/</baseURL><!--图片上传后的位置-->
	<licenseKey></licenseKey>
	<licenseName></licenseName>
	<imgWidth>1600</imgWidth>
	<imgHeight>1200</imgHeight>
	<imgQuality>80</imgQuality>
	<uriEncoding>UTF-8</uriEncoding><!--编码-->
	<forceASCII>false</forceASCII>
        <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
	<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
	<checkDoubleExtension>true</checkDoubleExtension>
	<checkSizeAfterScaling>true</checkSizeAfterScaling>
	<secureImageUploads>true</secureImageUploads>
	<htmlExtensions>html,htm,xml,js</htmlExtensions>

        4. 打开ckeditor/config.js作相应修改,以下是我的修改:
/*
Copyright (c) 2003-2011, 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.height = '700px';
	config.font_names = '新细明体/PMingLiU;细明体/MingLiU;标楷体/DFKai-SB;黑体/SimHei;宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312楷体_GB2312/KaiTi_GB2312;微軟正黑體/Microsoft JhengHei;微软雅黑体/Microsoft YaHei;隶书/LiSu;幼圆/YouYuan;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;华文仿宋/STFangsong;方正舒体/FZShuTi;方正姚体/FZYaoti;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'
			+ config.font_names;
};
        5. 将ckeditor-java-core-v.jar和ckfinder*.war的WEB-INF/lib目录下的所有jar包复制到项目中。

        6. 打开要使用ckeditor的页面,首先引入两个js:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>

        7. 在需要使用ckeditor的域下面添加一些代码:

<textarea rows="2" cols="2" name="content" id="content"></textarea> 
<script type="text/javascript">
if (CKEDITOR.instances['content']) {
	CKEDITOR.remove(CKEDITOR.instances['content']);
}

var basePath = '你的位置';

CKEDITOR
		.replace(
				'content',
				{
					filebrowserBrowseUrl : basePath
							+ '/ckfinder/ckfinder.htm',
					filebrowserImageBrowseUrl : basePath
							+ '/ckfinder/ckfinder.htm?type=Images',
					filebrowserFlashBrowseUrl : basePath
							+ '/ckfinder/ckfinder.htm?type=Flash',
					filebrowserUploadUrl : basePath
							+ '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
					filebrowserImageUploadUrl : basePath
							+ '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
					filebrowserFlashUploadUrl : basePath
							+ '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
					filebrowserWindowWidth : '1000',
					filebrowserWindowHeight : '1000'
				});
</script>

        8. 在web.xml中添加如下代码:

<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>/ckfinder/core/connector/java/connector.java</url-pattern>
</filter-mapping>
<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>
	<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>/ckfinder/core/connector/java/connector.java</url-pattern>
</servlet-mapping>

        启动tomcat,开始体验吧。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值