CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)
2012-04-24 14:17
459 查看
CKEditor3.x配置说明
一、基本使用:
1、所需文件架包
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:http://ckeditor.com/download
2、配置使用
A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;
B.在需要使用CKEditor的页面引入CKEditor的支持javascript
<scripttype="text/javascript"src="/commons/ckeditor/ckeditor.js"></script>
</head>
C.一般我们的内容是使用一个”<textarea>”来显示内容,然后使用调用脚本替换
<textareaid="editor1"name="editor1">Initialvalue.</textarea>
<scripttype="text/javascript">CKEDITOR.replace(“editor1”);</script>
D.CKEDITOR.replace(“editor1”)中的”editor1”为id或者是name搜索方式默认是先按id来搜索,没找到再按name来搜索
E.具体的图例
二、Java项目中配置使用:
1、所需文件架包
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:http://ckeditor.com/download
B.CKEditorforJava架包,比如:ckeditor-java-core-3.5.3.jar
下载地址:http://ckeditor.com/download
2、配置使用
A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;
B.将下载下来的CKEditorforJava包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录;
C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用
<%@tagliburi="http://ckeditor.com"prefix="ckeditor"%>
D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器
<textareaid="id_1"name="id_1">Initial
value.</textarea>
<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>
E.具体图例
三、Java项目中配置使用并支持简单的图片上传功能:
CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过showModalDialog来实现的,弊端不支持Chrome浏览器,IE,FireFox支持;
1、所需文件架包
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:http://ckeditor.com/download
B.CKEditorforJava架包,比如:ckeditor-java-core-3.5.3.jar
下载地址:http://ckeditor.com/download
2、配置使用
A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;
B.将下载下来的CKEditorforJava包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录;
C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用
<%@tagliburi="http://ckeditor.com"prefix="ckeditor"%>
D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器
<textareaid="id_1"name="id_1">Initial
value.</textarea>
<ckeditor:replacereplace="id_1"basePath="/commons/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(){varretFile=showModalDialog("/common/uploadImage.jsp","",
"dialogHeight:20;dialogWidth:29;");if(retFile!=null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},”
“/common/uploadImage.jsp”是应用已经有的上传模块链接,上传成功后通过模式对话框的returnValue返回图片链接,比如在上传成功页面加上如下js函数,点击确定时调用。
functionDone(){
window.returnValue=imgPath;//上传后的图片链接
window.close();
}
F.具体图例
四、Java项目中配置使用并支持图片上传功能包括FTP上传,图片压缩:
CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过commons-fileupload上传组件实现的,这里已经封装好上传处理Servlet只需要在配置文件ckeditor.properties中配置相关FTP服务器信息,是否压缩图片,上传附件的大小格式限制等。
1、所需文件架包和配置文件
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:http://ckeditor.com/download
B.CKEditorforJava架包,比如: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)根目录下
属性文件内容如下:
#defaultallowedextensionssettings
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
#basedirectoryfortheuserfilesrelativetothecontextroot
ckeditor.userFilesPath=/files/ckeditor/
#defaultencoding
ckeditor.encoding=UTF-8
#defaultfilesizethreshold:1*1024*1024=1048576
ckeditor.size.threshold=1048576
#defaultonefilesize:5*1024*1024=52428800
ckeditor.file.size.max=52428800
#defaultallfilessize:10*1024*1024=10485760
ckeditor.size.max=10485760
#somemessages
message.request.not.contain.images=Requestdoesnotcontainimageormediafile.
message.request.general.form=Requestisthegeneralform.
message.request.file.max=Onefileistoolarge.
message.request.all.file.max=Allfilesistoolarge.
#ftpconfigurations
#openftpfileuploadistrueotherwisefalse
ftp.upload=true
ftp.server=127.0.0.1
ftp.user_name=jjy
ftp.password=123
ftp.port=21
#imageresizeconfigurations
#openimageresizeistrueotherwisefalse
image.resize=true
#resizeByMaxSize:0,resizeByRatio:1,resizeByFixedWidth:2,resizeByFixedHeight:3
image.resize.type=0
#resizesize100,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
<servlet>
<servlet-name>ckeditor</servlet-name>
<servlet-class>com.ebiz.ssi.ckeditor.CkeditorImagesUploadServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ckeditor</servlet-name>
<url-pattern>/commons/ckeditor/images/upload.html</url-pattern>
</servlet-mapping>
图片:
F.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用
<%@tagliburi="http://ckeditor.com"prefix="ckeditor"%>
G.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器
<textareaid="id_1"name="id_1">Initial
value.</textarea>
<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>
H.具体图例
五、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.protectedSource.push(/<\s*iframe[\s\S]*?>/gi);//<iframe>tags.
config.protectedSource.push(/<\s*frameset[\s\S]*?>/gi);//<frameset>tags.
config.protectedSource.push(/<\s*frame[\s\S]*?>/gi);//<frame>tags.
config.protectedSource.push(/<\s*script[\s\S]*?\/script\s*>/gi);//<SCRIPT>tags.
config.baseFloatZIndex=10000;//编辑器的z-index值
config.baseHref=“”;//设置是使用绝对目录还是相对目录,为空为相对目录
六、CKEditor精简说明:
下载了完整的程序之后,先要对程序中的不必要的东西进行删除。凡是文件名或文件夹名前面有"_"的文件或文件夹都可以删除,这些文件是一些说明文件或者实例文件。另外,./lang文件夹中,只保留:zh_cn.js,en.js文件即可,这个文件夹是程序的语言包,因为其它语言大家用不到,放在那里也占用空间,所以删掉。./skins文件夹是编辑器的界面,根据情况保留至少一个文件夹即可,其中kama是可自定颜色UI的文件,建议保留,当然如果不在乎空间大小的话,也可以全部上传。删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).
一、基本使用:
1、所需文件架包
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:
2、配置使用
A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;
B.在需要使用CKEditor的页面引入CKEditor的支持javascript
<head>
<scripttype="text/javascript"src="/commons/ckeditor/ckeditor.js"></script>
</head>
C.一般我们的内容是使用一个”<textarea>”来显示内容,然后使用调用脚本替换
<textareaid="editor1"name="editor1">Initialvalue.</textarea>
<scripttype="text/javascript">CKEDITOR.replace(“editor1”);</script>
D.CKEDITOR.replace(“editor1”)中的”editor1”为id或者是name搜索方式默认是先按id来搜索,没找到再按name来搜索
E.具体的图例
二、Java项目中配置使用:
1、所需文件架包
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:
B.CKEditorforJava架包,比如:ckeditor-java-core-3.5.3.jar
下载地址:
2、配置使用
A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;
B.将下载下来的CKEditorforJava包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录;
C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用
<%@tagliburi="http://ckeditor.com"prefix="ckeditor"%>
D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器
<textareaid="id_1"name="id_1">Initial
value.</textarea>
<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>
*replace只的是textarea的name或者id
*basePathCKEditor的根目录
E.具体图例
三、Java项目中配置使用并支持简单的图片上传功能:
CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过showModalDialog来实现的,弊端不支持Chrome浏览器,IE,FireFox支持;
1、所需文件架包
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:
B.CKEditorforJava架包,比如:ckeditor-java-core-3.5.3.jar
下载地址:
2、配置使用
A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;
B.将下载下来的CKEditorforJava包(ckeditor-java-core-3.5.3.jar)复制进项目”/WEB-INF/lib”目录;
C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用
<%@tagliburi="http://ckeditor.com"prefix="ckeditor"%>
D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器
<textareaid="id_1"name="id_1">Initial
value.</textarea>
<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>
*replace只的是textarea的name或者id
*basePathCKEditor的根目录
E.简单快捷的给CKEditor加上图片上传功能
CKEditor非常好用,但它的图片/文件上传使用了CKFinder,虽然功能非常强大,但集成起来还是比较麻烦,而且根据应用还需要改造。如果自己的应用已经有图片/文件上传模块,能否直接拿过来用呢?答案是肯定的,而且非常简单,就是在图片链接输入框的右边加个按钮,点击事件链接到已有的上传模块,上传后把图片的url传递给左边的输入框即可。步骤如下:
打开ckeditor\plugins\image\dialogs\image.js,在链接输入框代码结尾也就是“m.lang.image.urlMissing)},”后面加上这些代码:
“{type:'button',id:'myUpload',align:'center',label:'新上传',onClick:function(){varretFile=showModalDialog("/common/uploadImage.jsp","",
"dialogHeight:20;dialogWidth:29;");if(retFile!=null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},”
“/common/uploadImage.jsp”是应用已经有的上传模块链接,上传成功后通过模式对话框的returnValue返回图片链接,比如在上传成功页面加上如下js函数,点击确定时调用。
functionDone(){
window.returnValue=imgPath;//上传后的图片链接
window.close();
}
F.具体图例
四、Java项目中配置使用并支持图片上传功能包括FTP上传,图片压缩:
CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过commons-fileupload上传组件实现的,这里已经封装好上传处理Servlet只需要在配置文件ckeditor.properties中配置相关FTP服务器信息,是否压缩图片,上传附件的大小格式限制等。
1、所需文件架包和配置文件
A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip
下载地址:
B.CKEditorforJava架包,比如:ckeditor-java-core-3.5.3.jar
下载地址:
C.Apache的上传组包commons-fileupload,比如:commons-fileupload-1.2.1.jar
下载地址:
D.Apache的上传组包commons-io,比如:commons-io-1.4.jar
下载地址:
E.Apache的FTP组件包commons-net,比如:commons-net-ftp-2.0.jar
下载地址:
F.Apache的工具包commons-lang,比如:commons-lang-2.5.jar
下载地址:
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)根目录下
属性文件内容如下:
#defaultallowedextensionssettings
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
#basedirectoryfortheuserfilesrelativetothecontextroot
ckeditor.userFilesPath=/files/ckeditor/
#defaultencoding
ckeditor.encoding=UTF-8
#defaultfilesizethreshold:1*1024*1024=1048576
ckeditor.size.threshold=1048576
#defaultonefilesize:5*1024*1024=52428800
ckeditor.file.size.max=52428800
#defaultallfilessize:10*1024*1024=10485760
ckeditor.size.max=10485760
#somemessages
message.request.not.contain.images=Requestdoesnotcontainimageormediafile.
message.request.general.form=Requestisthegeneralform.
message.request.file.max=Onefileistoolarge.
message.request.all.file.max=Allfilesistoolarge.
#ftpconfigurations
#openftpfileuploadistrueotherwisefalse
ftp.upload=true
ftp.server=127.0.0.1
ftp.user_name=jjy
ftp.password=123
ftp.port=21
#imageresizeconfigurations
#openimageresizeistrueotherwisefalse
image.resize=true
#resizeByMaxSize:0,resizeByRatio:1,resizeByFixedWidth:2,resizeByFixedHeight:3
image.resize.type=0
#resizesize100,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
<servlet>
<servlet-name>ckeditor</servlet-name>
<servlet-class>com.ebiz.ssi.ckeditor.CkeditorImagesUploadServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ckeditor</servlet-name>
<url-pattern>/commons/ckeditor/images/upload.html</url-pattern>
</servlet-mapping>
图片:
F.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用
<%@tagliburi="http://ckeditor.com"prefix="ckeditor"%>
G.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器
<textareaid="id_1"name="id_1">Initial
value.</textarea>
<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>
*replace只的是textarea的name或者id
*basePathCKEditor的根目录
H.具体图例
五、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.protectedSource.push(/<\s*iframe[\s\S]*?>/gi);//<iframe>tags.
config.protectedSource.push(/<\s*frameset[\s\S]*?>/gi);//<frameset>tags.
config.protectedSource.push(/<\s*frame[\s\S]*?>/gi);//<frame>tags.
config.protectedSource.push(/<\s*script[\s\S]*?\/script\s*>/gi);//<SCRIPT>tags.
config.baseFloatZIndex=10000;//编辑器的z-index值
config.baseHref=“”;//设置是使用绝对目录还是相对目录,为空为相对目录
六、CKEditor精简说明:
下载了完整的程序之后,先要对程序中的不必要的东西进行删除。凡是文件名或文件夹名前面有"_"的文件或文件夹都可以删除,这些文件是一些说明文件或者实例文件。另外,./lang文件夹中,只保留:zh_cn.js,en.js文件即可,这个文件夹是程序的语言包,因为其它语言大家用不到,放在那里也占用空间,所以删掉。./skins文件夹是编辑器的界面,根据情况保留至少一个文件夹即可,其中kama是可自定颜色UI的文件,建议保留,当然如果不在乎空间大小的话,也可以全部上传。删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).
相关文章推荐
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩
- CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩
- kindeditor 使其支持配置上传路径,限制上传图片大小(java)
- ckeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash
- Java项目中使用FTP与SFTP上传图片
- PHP+CKEditor 3配置详细说明(包括图片上传)
- kindeditor在Java项目中的应用以及图片上传配置
- java opencv 调用摄像头实现拍照及本地保存 支持上传FTP 路径配置
- C# ckeditor+ckfinder的图片上传配置
- Java 设置添加ckeditor图片上传功能
- CKEditor上传图片—配置CKFinder
- CKEditor-4.6.2结合Struts2的使用,加CKEditor图片上传的配置
- java POI导出excel(带有图片的数据)以及ftp上传图片到另一台服务器的方法参考代码
- ajax中form表单中含有文件上传功能,后台语言是java,包括图片的下载,预览,删除
- Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式
- PHP中配置Ckeditor和Ckfinder(实现图片上传)
- edtftpj让Java上传FTP文件支持断点续传