最近根据项目需要,在当前项目开发框架中整合入了CKEditor富文本编辑器,其中文件上传使用了CKFinder插件。
在实际的系统开发框架中,整合较为复杂,由于系统开发框架中,为了开发便利,做了许多特殊设置,费了些时间。现在把基本的步骤记录下来。
使用的文件见附件。
1.解压ckeditor_3.6.6.zip文件,将解压后的ckeditor,整个复制到web工程根目录下。_samples 和 _source文件夹可删除。另外,该目录下的文件,只需保留ckeditor.js、config.js、contents.css、ckeditor_basic.js。
在子文件夹中,可查找相关的语言配置文件,只需保留en.js和zh-cn.js文件。
2.解压ckfinder_java_2.2.2.zip。将解压后的ckfinder\CKFinderJava\目录下的ckfinder,整个复制到web工程根目录下。。_samples 文件夹可删除。该目录下的*.txt文档可删除。
3.将ckfinder_java_2.2.2.zip解压后目录中的CKFinderJava.war文件继续解压,解压后目录中的WEB-INF\lib中的jar文件夹,加入到web工程的lib文件夹中。注意,如果web工程中已经存在相关的jar文件,注意版本号。
4.将解压后目录中的WEB-INF\中的config.xml文件,复制到web工程的WEB-INF文件夹中。
配置文件中
<enabled>false</enabled> 配置项,false改为true
<baseURL>/CKFinderJava/userfiles/</baseURL>配置项,改为web工程的目录+上传文件夹
5.修改web工程的web.xml文件,加入以下配置:
<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> <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>
配置完成。
若需要整合ExtJs中使用,需要引入附件中的两个js文件。
引入后,使用方法:
var content = new Ext.form.CKEditor({ anchor : '98%', fieldLabel : '内容', name : 'content', CKConfig: { //customConfig : '/IRS/ckeditor/config.js', //toolbar: 'Full', height : 200, width: 1030 } });
这里需要注意的几点。
1.ckeditor/config.js文件中,配置信息中需要将项目名称也添加进去,形成绝对路径,不使用相对路径。测试后,发现相对路径在上传图片中,出现路径错误。
2.需要修改Struts2过滤器配置。
默认过滤器过滤全部请求:/*,此处需要修改,修改为*.action和*.jsp过滤路径配置。
或者根据实际需要,重写Struts2过滤器。
相关推荐
ssh+extjs+mysql整合
搭建的ssh+extjs的框架,已投入使用
SSH+ExtJs分页小例子
该demo为Spring2.0+struts2.0+hibernate3 +extjs4.0整合开发得demo。希望对想了解extjs4的同学有帮助!没资源分了挣点资源分!
SSH+EXTJS页面图书管理系统SSH+EXTJS页面图书管理系统SSH+EXTJS页面图书管理系统SSH+EXTJS页面图书管理系统SSH+EXTJS页面图书管理系统SSH+EXTJS页面图书管理系统SSH+EXTJS页面图书管理系统
SSH+Extjs开发视频教程-基于SSH+Maven+Extjs4+MySQL技术实战开发CRM客.doc
最近自己动手做了一个后台使用struts2+Hibernate+Spring 前台使用extjs的工程当作练习。工程实现的功能很简单,就是用户登陆后,可以将笔记内容记录到系统里。后续可以通过日期或者内容进行查询和修改。 主要的练习...
这是一个基于EXTJS+SSH+ORACLE实现的demo,完整的前台到后台的实现,有需要的朋友拿去吧···
ssh+extjs+json
SSH+extjs做的简易论坛_Italk吧_SSH+extjs做的简易论坛_Italk吧_SSH+extjs做的简易论坛_Italk吧_
SSH + EXTJS_管理系统.rarSSH + EXTJS_管理系统.rarSSH + EXTJS_管理系统.rar
SSH+EXTJS4 的一个模块实现,使用的是mysql数据库,sql文件在文件夹里面
ssh文件是struts2.3.15,hibernate4.2.5 spring3.2.4 extjs4.2.1
ssh+extjs spring定时任务
ssh+extjs4.0grid删除数据实例,包没有了大家把包下载下来! 我的资源中有extjs的依赖包!
struts2+spring+hibernate整合(ssh+extjs整合)小项目“VIP消费查询系统”源码(源码+系统设计文档+建表语句+所有jar包)。该项目包含以下功能: 登录:本系统为商场VIP消费情况查询系统,具有一定的保密性。因此必须...
ssh+extjs人力资源管理系统.rar
ssh + extjs 4登录的小例子(前后台代码)
本人搭建的ssh2+extjs+mysql最小jar包框架(只有20个)