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文件夹中。

   配置文件中

  false 配置项，false改为true

  /CKFinderJava/userfiles/配置项，改为web工程的目录+上传文件夹

 

5.修改web工程的web.xml文件，加入以下配置：

  

		ConnectorServlet
		com.ckfinder.connector.ConnectorServlet
		
			XMLConfig
			/WEB-INF/config.xml
		
		
			debug
			false
		
		1
	
	
		ConnectorServlet
		
			/ckfinder/core/connector/java/connector.java
		
	
	
		FileUploadFilter
		com.ckfinder.connector.FileUploadFilter
                
                    sessionCookieName
                    JSESSIONID
                
                
                    sessionParameterName
                    jsessionid
                
	
	
		FileUploadFilter
		
			/ckfinder/core/connector/java/connector.java
     	 
	 

 

配置完成。

 

若需要整合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过滤器。

 

 

 

 

• ckeditor_3.6.6.zip (2.5 MB)
• 下载次数: 84

• ckfinder_java_2.2.2.zip (4.8 MB)
• 下载次数: 77

• CKEditor_ExtJs.rar (2.1 KB)
• 下载次数: 119