最近根据项目需要,在当前项目开发框架中整合入了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过滤器。