使用ckEditor集成struts2实现文件的上传和现在。
步骤一:
新建struts2项目,拷入对应的jar包,编写好web.xml文件。
准备好ckeditor需要的jar包。
步骤二:
拷贝
ckeditor文件夹
ckfinder(需解压)文件夹
到WebRoot下:
步骤三:
引入jar包,因为struts中已经有了commons-fileupload和commins-io。所以就不需要再导入了。
步骤四:
解压ckfinder_java_2.4.3,解压war包
ckfinder_java_2.4.3/CKFinderJava-2.4.3.war/ckfinder/WEB-INF/config.xml
引入config.xml并修改
enabled = true
<baseDir></baseDir>
<baseURL>/ckscxz/userfiles/</baseURL>
设置启用ckfinder,设置指定路径。
步骤五:
修改web.xml
配置CKEditor的servlet等信息
<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>
<session-config>
<session-timeout>10</session-timeout>
</session-config>
因为配置struts2拦截 /* ,ckeditor的servlet会优先被struts2拦截
解决方法:
二种方式:
1、修改struts2拦截设置 将/* 修改为.action或.do
2、自定义CKeditor的过滤器,让它来继承Struts2的过滤器FilterDispatcher获得完整的http url的地址,然后判断URL地址中是否包含CKEditor的servlet拦截规则”/ckfinder/core/connector/java /*/”,若包含,struts2就不拦截该URL请求,而直接转发,交给CKEditor的servlet来处理; 若不包含,则拦截器拦截该URL请求,由struts2来处理。
步骤六:
ckeditor config.js配置
注意路径配置
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
config.language = "zh-cn" ;
config.toolbar = 'Full';
config.height = 300;
config.image_previewText = " ";
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
// 在 CKEditor 中集成 CKFinder,注意 ckfinder的路径选择要正确。
config.filebrowserBrowseUrl = '/yxl/ckfinder/ckfinder.html' ;
config.filebrowserImageBrowseUrl = '/yxl/ckfinder/ckfinder.html?type=Images' ;
config.filebrowserFlashBrowseUrl = '/yxl/ckfinder/ckfinder.html?type=Flash' ;
config.filebrowserUploadUrl = '/yxl/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;
config.filebrowserImageUploadUrl = '/yxl/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;
config.filebrowserFlashUploadUrl = '/yxl/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
config.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700';
config.language = "zh-cn" ;
};
文件中引入:
jsp页面
<script type="text/javascript"
src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/ckfinder/ckfinder.js"></script>
<textarea rows="5" cols="10" name="editor" class="ckeditor">
</textarea>
这样就实现文件的上传功能。