SSH集成CKEditor和CKFinder.docx
- 文档编号:10904654
- 上传时间:2023-05-28
- 格式:DOCX
- 页数:15
- 大小:985.31KB
SSH集成CKEditor和CKFinder.docx
《SSH集成CKEditor和CKFinder.docx》由会员分享,可在线阅读,更多相关《SSH集成CKEditor和CKFinder.docx(15页珍藏版)》请在冰点文库上搜索。
SSH集成CKEditor和CKFinder
SSH集成CKEditor和CKFinder
一、本文档目的
最近接触一个网站信息发布系统。
要实现在本地浏览器对系统服务器端的图片、flash、视频进行管理的功能。
在查阅资料的过程中,找到了将ckeditor和ckfinder配合使用来实现该功能。
这里主要是想给大家分享一下将ckeditor和ckfinder集成到SSH框架的配置过程以及在此过程中所遇到问题的解决方法。
二、环境介绍
本集成涉及的内容有:
MyEclipse9.0M1、Struts2.1、Spring3.0、Hibernate3.3、ckeditor_3.6.4、ckfinder_java_2.2。
这里不细介绍SSH框架的搭建,把主要的精力放在已配好的SSH框架里整合ckeditor和ckfinder。
三、集成过程
1、下载ckeditor和ckfinder:
ckeditor下载地址为:
ckfinder下载地址为:
这里提醒一点:
ckfinder一定得下载针对Java的。
下载后你会得到:
ckeditor_3.6.4.zip和ckfinder_java_2.2.zip这2个压缩文件。
下载截图如下:
进入ckeditor主页,点击Previousversions下的“Viewall”即可到如下界面。
图1-1下载ckeditor-java-3.6.4.zip
图1-2下载ckfinder_java_2.2.zip
2、将ckeditor和ckfinder添加到项目中:
解压你下载的ckeditor_3.6.4.zip和ckfinder_java_2.2.zip这2个压缩文件,将ckeditor_3.6.4目录下的ckeditor文件夹和ckfinder_java_2.2目录下的ckfinder_java_2.2\ckfinder\_sources\CKFinderforJava\WebApp\src\
main\webapp目录下的ckfinder文件夹复制到你项目的Webroot根目录下的plugins目录下(自己建的,也可以不放刺目录下,但要注意以后配置的路径也要相应的改变)。
结果如图:
图1-3添加到项目
其次,还要将ckfinder_java_2.2\ckfinder\_sources\CKFinderforJava\WebApp\src\main\webapp\WEB-INF目录下的config.xml文件拷贝到项目的WEB-INF目录下,如图:
图1-4拷贝config.xml文件
之后对config.xml文件做如下修改,其它为提到的基本不变:
--开启上传功能,如果为false为提示:
因为安全原因,文件不可浏览.请联系系统管理员并检查CKFinder配置文件.并且默认你是是为false的-->
--文件存放的地址/ckfinder/userfiles/(自动创建,一般写成自己的项目名称就可以了)-->
在本项目中的修改如下图:
图1-5修改config.xml文件
3、配置CKeditor
在CKeditor目录下的config.js中添加如下代码:
/**
*@licenseCopyright(c)2003-2012,CKSource-FredericoKnabben.Allrightsreserved.
*Forlicensing,seeLICENSE.htmlor
*/
CKEDITOR.editorConfig=function(config){
//Definechangestodefaultconfigurationhere.Forexample:
//config.language='fr';
//config.uiColor='#AADC6E';
//配置默认配置
config.language='zh-cn';//配置语言
//config.uiColor='#FFF';//背景颜色
//config.width=400;//宽度
//config.height=400;//高度
//config.skin='v2';//编辑器皮肤样式
//取消“拖拽以改变尺寸”功能
//config.resize_enabled=false;
//使用基础工具栏
//config.toolbar="Basic";
//使用全能工具栏
config.toolbar="Full";
//使用自定义工具栏
//config.toolbar=
//[
//['Source','Preview','-'],
//['Cut','Copy','Paste','PasteText','PasteFromWord',],
//['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
//['Image','Flash','Table','HorizontalRule','Smiley',SpecialChar','PageBreak'],
//'/',
//['Bold','Italic','Underline','-','Subscript','Superscript'],
//['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
//['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//['Link','Unlink','Anchor'],
//'/',
//['Format','Font','FontSize'],
//['TextColor','BGColor'],
//['Maximize','ShowBlocks','-','About']
//];
//在CKEditor中集成CKFinder注意ckfinder的路径选择要正确。
config.filebrowserBrowseUrl='plugins/ckfinder/ckfinder.html',
config.filebrowserImageBrowseUrl='plugins/ckfinder/ckfinder.html?
type=Images',
config.filebrowserFlashBrowseUrl='plugins/ckfinder/ckfinder.html?
type=Flash',
config.filebrowserUploadUrl='plugins/ckfinder/core/connector/java/connector.java?
command=QuickUpload&type=Files',
config.filebrowserImageUploadUrl='plugins/ckfinder/core/connector/java/connector.java?
command=QuickUpload&type=Images',
config.filebrowserFlashUploadUrl='plugins/ckfinder/core/connector/java/connector.java?
command=QuickUpload&type=Flash',
config.filebrowserWindowWidth='1000',
config.filebrowserWindowHeight='700'
};
4、配置CKFinder
在web.xml中加入如下在代码:
--CKFinder配置开始-->
/plugins/ckfinder/core/connector/java/connector.java
/plugins/ckfinder/core/connector/java/connector.java
--CKFinder配置结束-->
注意:
这里的配置的filter会和Struts的配置冲突,导致上传照片传不上去,此时需要在Struts.xml文件中加入如下代码:
--解决Struts与CKfinder的冲突-->
--表示对符合此正则表达式的URL,Struts不进行过滤,仅传递-->
5、导入需要的jar包,放在lib目录下
将ckfinder_java_2.2\ckfinder下的CKFinderJava.war的后缀名改为rar然后解压,之后将CKFinderJava\WEB-INF\lib中的这些jar包可拷到项目里。
所需jar包如下图:
图1-6需添加的JAR包
6、在前端页面调用CKeditor和CKFinder
在调用CKeditor和CKFinder首先要引入对应的JS文件。
代码如下:
其代码如下:
<%@pagelanguage="java"import="java.util.*"pageEncoding="ISO-8859-1"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+":
//"
+request.getServerName()+":
"+request.getServerPort()
+path+"/";
%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
ThisismyJSPpage.
//ThisisacheckfortheCKEditorclass.Ifnotdefined,thepathsmustbechecked.
if(typeofCKEDITOR=='undefined'){
document
.write(' #ff0000">Error: CKEditornotfound
+'ThissampleassumesthatCKEditor(notincludedwithCKFinder)isinstalledin'
+'the"/ckeditor/"path.Ifyouhaveitinstalledinadifferentplace,justedit'
+'thisfile,changingthewrongpathsinthe
(line5)andthe"BasePath"'+'value(line32).');
}else{
vareditor=CKEDITOR.replace('editor1');
CKFinder.setupCKEditor(editor,'/ckfinder/');
//ItisalsopossibletopassanobjectwithselectedCKFinderpropertiesasasecondargument.
//CKFinder.SetupCKEditor(editor,{BasePath:
'../../',RememberLastFolder:
false});
}
注意:
页面form、textarea以及其下的script代码的写法。
7、部署项目并运行:
图1-7CKeditor界面
图1-8添加图片
图1-9CKFinder查看服务端上图片
图1-10上传图片到服务端
图1-10上传图片
图1-10添加图片成功
图1-10添加图片结果
至此,整个配置就完成了。
并且配好了添加和上传图片的功能。
四、优化
这里提供几篇本人觉得不错的CKeditor和CKfinder的文章,供大家参考:
优化配置部分。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- SSH 集成 CKEditor CKFinder
![提示](https://static.bingdoc.com/images/bang_tan.gif)