SSH+ExtJs完成CKEditor富文本编辑器整合

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