CKEditor+CKFinder+JSP实现在线编辑器上传文件（包括图片、Flash）-红联Linux系统门户

我就一直在琢磨如何才能实现在编编辑器的功能，由于家里的网是电信天翼的3G卡，有流量限制，如今也就剩下100M左右的流量了，上网也很费劲，于是狠心的上网找了一大堆的资料，终于实现了这样的功能，确实挺纠结的，这里我先给大家演示基本的搭建，下一篇文章演示在Struts2框架下的搭建。在分享我需要声明一下，这篇文章是参考几个网友提供的资料再加上自己的亲身实现，进行的一些修改，最终分享给大家。

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3
CKEditor下载地址：http://ckeditor.com/download 在线演示地址：http://ckeditor.com/demo
ckeditor-java-core-3.5.3.zip 下载地址：http://ckeditor.com/download
CKFinder下载地址：http://cksource.com/ckfinder/trial
1、解压ckeditor_3.6.4.zip，然后打开ckeditor文件夹，只需保留：images、lang、plugins、 skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可
其他的文件可以删除。然后将整个ckeditor放在web工程下，与WEB-INF处于同一级目录。
2、将ckeditor-java-core-3.5.3.zip解压，然后将ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。

3、将ckfinder_java_2.3.zip解压，然后将CKFinderJava.war解压后，将WEB-INF里面的lib下面所有的 jar包拷贝至web项目的lib下，将ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夹拷贝至web工程下，与ckeditor保持同级，将其下的WEB- INF下面的config.xml文件拷贝至web项目的WEB-INF下，并根据自己的项目稍作调整即可，如下：[code]
true

/Software_Site/View/UploadFiles/

1600
1200
80
UTF-8
false
CKFinder_UserRole
true
true
true
html,htm,xml,js

.svn
CVS

.*

%BASE_URL%files/
%BASE_DIR%files
0
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

%BASE_URL%images/
%BASE_DIR%images
0
bmp,gif,jpeg,jpg,png

%BASE_URL%flash/
%BASE_DIR%flash
0
swf,flv

*
*
/
true
true
true
true
true
true
true
true

true
%BASE_URL%_thumbs/
%BASE_DIR%_thumbs
false
100
100
80

imageresize
com.ckfinder.connector.plugins.ImageResize

fileeditor
com.ckfinder.connector.plugins.FileEditor

com.ckfinder.connector.configuration.ConfigurationPathBuilder
[/code]4、然后在web.xml下添加上传用的配置如下：[code]

ConnectorServlet

com.ckfinder.connector.ConnectorServlet

XMLConfig

/WEB-INF/config.xml

debug

false

ConnectorServlet

/ckfinder/core/connector/java/connector.java

[/code]5、然后修改ckeditor下面的config.js，如下：[code]/*
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.language = 'zh-cn' ;
config.skin = 'office2003';
};[/code]6、然后就是CKEditor+CKFinder在jsp页面中应用，我这里仅仅演示上传图片的部分：

a、首先在页面的头部加上这两句：[code]<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%>[/code]b、其次是在标签之间加入这两句：[code]