CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩(转)
备注：不支持附件，如需附件请移至我的资源库
[url]http://download.csdn.net/detail/jiangjiayong/3871706[/url]
CKEditor 3.x配置说明
•基本使用：
1、所需文件架包
A. Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：[url]http://ckeditor.com/download[/url]
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．在需要使用CKEditor的页面引入CKEditor的支持javascript
C．一般我们的内容是使用一个”
D．CKEDITOR.replace(“editor1”)中的”editor1”为id或者是name搜索方式默认是先按id来搜索，没找到再按name来搜索
•Java项目中配置使用：
1、所需文件架包
A．Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：[url]http://ckeditor.com/download[/url]
B．CKEditor for Java 架包，比如：ckeditor-java-core-3.5.3.jar
下载地址：[url]http://ckeditor.com/download[/url]
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．将下载下来的CKEditor for Java 包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录；
C．在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用
D．一般我们的内容是使用一个”
* replace 只的是textarea 的name或者id* basePath CKEditor的根目录
•Java项目中配置使用并支持简单的图片上传功能：
CKEditor在Java项目中配置使用，并支持图片的上传功能。原理是通过showModalDialog来实现的，弊端不支持Chrome浏览器，IE,FireFox支持；
1、所需文件架包
A．Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：[url]http://ckeditor.com/download[/url]
B．CKEditor for Java 架包，比如：ckeditor-java-core-3.5.3.jar
下载地址：[url]http://ckeditor.com/download[/url]
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．将下载下来的CKEditor for Java 包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录；
C．在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用
<%@ taglib uri="http://ckeditor.com"prefix="ckeditor"%>
D．一般我们的内容是使用一个”
* replace 只的是textarea 的name或者id* basePath CKEditor的根目录E．简单快捷的给CKEditor加上图片上传功能
CKEditor非常好用，但它的图片/文件上传使用了CKFinder，虽然功能非常强大，但集成起来还是比较麻烦，而且根据应用还需要改造。如果自己的应用已经有图片/文件上传模块，能否直接拿过来用呢？答案是肯定的，而且非常简单，就是在图片链接输入框的右边加个按钮，点击事件链接到已有的上传模块，上传后把图片的url传递给左边的输入框即可。步骤如下：
打开ckeditor\plugins\image\dialogs\image.js，在链接输入框代码结尾也就是“m.lang.image.urlMissing)},”后面加上这些代码：
“{type:'button',id:'myUpload',align:'center',label:'新上传',onClick:function(){var retFile = showModalDialog("/common/uploadImage.jsp", "", "dialogHeight:20;dialogWidth:29;"); if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},”
“/common/uploadImage.jsp”是应用已经有的上传模块链接，上传成功后通过模式对话框的returnValue返回图片链接，比如在上传成功页面加上如下js函数，点击确定时调用。
•Java项目中配置使用并支持图片上传功能包括FTP上传，图片压缩：
CKEditor在Java项目中配置使用，并支持图片的上传功能。原理是通过commons-fileupload上传组件实现的，这里已经封装好上传处理Servlet只需要在配置文件ckeditor.properties 中配置相关FTP服务器信息，是否压缩图片，上传附件的大小格式限制等。
1、所需文件架包和配置文件
A．Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：http://ckeditor.com/download
B．CKEditor for Java 架包，比如：ckeditor-java-core-3.5.3.jar
下载地址：http://ckeditor.com/download
C．Apache的上传组包 commons-fileupload ，比如：commons-fileupload-1.2.1.jar
下载地址：http://commons.apache.org/
D．Apache的上传组包 commons-io，比如：commons-io-1.4.jar
下载地址：http://commons.apache.org/
E．Apache的FTP组件包commons-net ， 比如：commons-net-ftp-2.0.jar
下载地址：http://commons.apache.org/
F．Apache的工具包 commons-lang ，比如：commons-lang-2.5.jar
下载地址：http://commons.apache.org/
G．上传处理组件包 ckeditor-upload-1.0.jar
自己封装的基于Servlet的图片上传处理组件
H．CKEditor的图片上传配置属性文件自己添加：ckeditor.properties
I．CKEditor的配置文件修改过后的： config.js
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．将下载下来的所需组件架包拷贝进项目”/WEB-INF/lib”目录；
C．将图片上传配置文件ckeditor.properties拷贝到项目SRC(classes)根目录下
属性文件内容如下：
D．CKEditor配置文件” /ckeditor/config.js”修改
E．在web.xml中配置Servlet
F．在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用
G．一般我们的内容是使用一个”
replace 只的是textarea 的name或者id* basePath CKEditor的根目录•CKEditor中config.js配置文件的说明即样式自定义调整：
Congfig.js是CKDitor的配置文件，在这个里面可以修改编辑器的样式和所需工具栏等等
[url]http://download.csdn.net/detail/jiangjiayong/3871706[/url]
CKEditor 3.x配置说明
•基本使用：
1、所需文件架包
A. Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：[url]http://ckeditor.com/download[/url]
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．在需要使用CKEditor的页面引入CKEditor的支持javascript
C．一般我们的内容是使用一个”
D．CKEDITOR.replace(“editor1”)中的”editor1”为id或者是name搜索方式默认是先按id来搜索，没找到再按name来搜索
•Java项目中配置使用：
1、所需文件架包
A．Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：[url]http://ckeditor.com/download[/url]
B．CKEditor for Java 架包，比如：ckeditor-java-core-3.5.3.jar
下载地址：[url]http://ckeditor.com/download[/url]
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．将下载下来的CKEditor for Java 包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录；
C．在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用
<%@ taglib uri="http://ckeditor.com"prefix="ckeditor"%>
D．一般我们的内容是使用一个”
* replace 只的是textarea 的name或者id* basePath CKEditor的根目录
•Java项目中配置使用并支持简单的图片上传功能：
CKEditor在Java项目中配置使用，并支持图片的上传功能。原理是通过showModalDialog来实现的，弊端不支持Chrome浏览器，IE,FireFox支持；
1、所需文件架包
A．Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：[url]http://ckeditor.com/download[/url]
B．CKEditor for Java 架包，比如：ckeditor-java-core-3.5.3.jar
下载地址：[url]http://ckeditor.com/download[/url]
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．将下载下来的CKEditor for Java 包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录；
C．在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用
<%@ taglib uri="http://ckeditor.com"prefix="ckeditor"%>
D．一般我们的内容是使用一个”
* replace 只的是textarea 的name或者id* basePath CKEditor的根目录E．简单快捷的给CKEditor加上图片上传功能
CKEditor非常好用，但它的图片/文件上传使用了CKFinder，虽然功能非常强大，但集成起来还是比较麻烦，而且根据应用还需要改造。如果自己的应用已经有图片/文件上传模块，能否直接拿过来用呢？答案是肯定的，而且非常简单，就是在图片链接输入框的右边加个按钮，点击事件链接到已有的上传模块，上传后把图片的url传递给左边的输入框即可。步骤如下：
打开ckeditor\plugins\image\dialogs\image.js，在链接输入框代码结尾也就是“m.lang.image.urlMissing)},”后面加上这些代码：
“{type:'button',id:'myUpload',align:'center',label:'新上传',onClick:function(){var retFile = showModalDialog("/common/uploadImage.jsp", "", "dialogHeight:20;dialogWidth:29;"); if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},”
“/common/uploadImage.jsp”是应用已经有的上传模块链接，上传成功后通过模式对话框的returnValue返回图片链接，比如在上传成功页面加上如下js函数，点击确定时调用。
function Done() {
window.returnValue = imgPath; //上传后的图片链接
window.close();
}•Java项目中配置使用并支持图片上传功能包括FTP上传，图片压缩：
CKEditor在Java项目中配置使用，并支持图片的上传功能。原理是通过commons-fileupload上传组件实现的，这里已经封装好上传处理Servlet只需要在配置文件ckeditor.properties 中配置相关FTP服务器信息，是否压缩图片，上传附件的大小格式限制等。
1、所需文件架包和配置文件
A．Ckeditor基本文件包，比如：ckeditor_3.6.2.zip
下载地址：http://ckeditor.com/download
B．CKEditor for Java 架包，比如：ckeditor-java-core-3.5.3.jar
下载地址：http://ckeditor.com/download
C．Apache的上传组包 commons-fileupload ，比如：commons-fileupload-1.2.1.jar
下载地址：http://commons.apache.org/
D．Apache的上传组包 commons-io，比如：commons-io-1.4.jar
下载地址：http://commons.apache.org/
E．Apache的FTP组件包commons-net ， 比如：commons-net-ftp-2.0.jar
下载地址：http://commons.apache.org/
F．Apache的工具包 commons-lang ，比如：commons-lang-2.5.jar
下载地址：http://commons.apache.org/
G．上传处理组件包 ckeditor-upload-1.0.jar
自己封装的基于Servlet的图片上传处理组件
H．CKEditor的图片上传配置属性文件自己添加：ckeditor.properties
I．CKEditor的配置文件修改过后的： config.js
2、配置使用
A．将下载下来的CKEditor压缩解压，将解压后的文件夹(“ckeditor”)拷贝进项目里面，比如我是放在”WebContent”的”commons”文件夹下；
B．将下载下来的所需组件架包拷贝进项目”/WEB-INF/lib”目录；
C．将图片上传配置文件ckeditor.properties拷贝到项目SRC(classes)根目录下
属性文件内容如下：
# default allowed extensions settings
ckeditor.resourceType.media.extensions.allowed =.aiff|.asf|.avi|.bmp|.fla|.flv|.gif|.jpeg|.jpg|.mid|.mov|.mp3|.mp4|.mpc|.mpeg|.mpg|.png|.qt|.ram|.rm|.rmi|.rmvb|.swf|.tif|.tiff|.wav|.wma|.wmv
# base directory for the user files relative to the context root
ckeditor.userFilesPath =/files/ckeditor/
# default encoding
ckeditor.encoding =UTF-8
# default file size threshold : 1*1024*1024 = 1048576
ckeditor.size.threshold =1048576
# default one file size : 5*1024*1024 = 52428800
ckeditor.file.size.max =52428800
# default all files size : 10*1024*1024 = 10485760
ckeditor.size.max =10485760
# some messages
message.request.not.contain.images =Request does not contain image or media file.
message.request.general.form =Request is the general form.
message.request.file.max =One file is too large.
message.request.all.file.max =All files is too large.
# ftp configurations
# open ftp file upload is true otherwise false
ftp.upload =true
ftp.server =127.0.0.1
ftp.user_name =jjy
ftp.password =123
ftp.port =21
# image resize configurations
# open image resize is true otherwise false
image.resize =true
# resizeByMaxSize:0,resizeByRatio:1,resizeByFixedWidth:2,resizeByFixedHeight:3
image.resize.type =0
# resize size 100,120,240,400,640
image.resize.size =120,240,400
D．CKEditor配置文件” /ckeditor/config.js”修改
CKEDITOR.editorConfig = function(config) {
//获取项目的目录比如：http://www.mymyty.com
varstrFullPath = window.document.location.href;
varstrPath = window.document.location.pathname;
varpos = strFullPath.indexOf(strPath);
varprePath = strFullPath.substring(0,pos);
varpostPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
varpath_url = prePath+postPath;
//显示出图片上传模块
config.pasteFromWordRemoveStyles = true;
config.filebrowserImageUploadUrl = path_url + "/commons/ckeditor/images/upload.html"; //为图片上传处理Servlet在web.xml中配置
// 去掉ckeditor“保存”按钮
config.removePlugins = 'save';
};E．在web.xml中配置Servlet
ckeditor
com.ebiz.ssi.ckeditor.CkeditorImagesUploadServlet
1
ckeditor
/commons/ckeditor/images/upload.html
F．在需要使用CKEditor的jsp页面配置CKEditor的标签，以后使用通过标签使用
<%@ taglib uri="http://ckeditor.com"prefix="ckeditor"%>G．一般我们的内容是使用一个”
replace 只的是textarea 的name或者id* basePath CKEditor的根目录•CKEditor中config.js配置文件的说明即样式自定义调整：
Congfig.js是CKDitor的配置文件，在这个里面可以修改编辑器的样式和所需工具栏等等
config.language = 'zh-cn'; //编辑器语言
config.width = 600; //初始化时的宽度
config.height = 400; //初始化时的高度
config.skin='kama'; //编辑器样式，有三种：’kama’（默认）、’office2003′、’v2′
config.tabSpaces = 4;
config.resize_maxWidth = 600; //如果设置了编辑器可以拖拽这是可以移动的最大宽度
config.toolbarCanCollapse = false; //工具栏可以隐藏
//config.toolbarLocation = 'bottom'; //可选：设置工具栏在整个编辑器的底部bottom
config.resize_minWidth = 600; //如果设置了编辑器可以拖拽这是可以移动的最小宽度
config.resize_enabled = false; //如果设置了编辑器可以拖拽
// 下面是编辑器工具栏配置，"/"代表换行
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
//以下是后添加的验证非法数据
config.protectedSource.push(/<\s*iframe[\s\S]*?>/gi); //