在S2SH开发的项目中需要做文章管理的功能,使用ckeditor+ckfinder实现文章编辑和文件管理。
一、需要的下载的资源有:
ckeditor_3.6.3.zip
ckeditor-java-3.6.2.war
ckfinder_java_2.2.1.zip (注意要下载java版)
将下载的ckeditor和ckfinder文件夹放到WebRoot根目录下同一级别:
把下载的ckedditor和ckfinder包时包含在其lib目录下的资源包引用到自己的项目中:
这里还有两个jar包:commons-io-2.0.1.jar、commons-fileupload-1.2.2.jar没有放进来,是因为我struts2的引用中已经有这两个jar包了。
二、代码
前台页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>添加新闻</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script> <script type="text/javascript" src="<%=basePath%>ckfinder/ckfinder.js"></script> </head> <body> <a href="<%=basePath%>jsp/index.jsp">返回首页</a> | <a href="<%=basePath%>jsp/viewNews.jsp">查看新闻</a> <div> <center><h2>添加新闻</h2></center> <form name="form1" action="newsInfo" method="post"> <table style="width:1024px;height:auto;" border="0" cellspacing="10px;" cellpadding="5"> <tr> <td>标题:</td> <td><input type="text" value="" name="news.title" style="width:100%;height:28px;padding-left:5px; margin-top:3px;" /> </td> </tr> <tr> <td valign="top">内容:</td> <td><textarea id="editor1" name="news.content" rows="5" cols="50"></textarea> </td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td><input type="submit" value="提交" style="width:80px;height:25px;"/> </td> </tr> </table> </form> </div> <script type="text/javascript"> CKEDITOR.replace('editor1',{ filebrowserBrowseUrl : '<%=basePath%>ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '<%=basePath%>ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl : '<%=basePath%>ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl : '<%=basePath%>ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '<%=basePath%>ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '<%=basePath%>ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' }); </script> </body> </html>
web.xml中添加以下配置,原先struts2及其spring的配置都不变:
<!-- ckfinder文件上传配置 start --> <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> <!-- ckfinder文件上传配置 end -->
config.xml:
<config> <enabled>true</enabled> <baseDir>C:\tomcat7\webapps\UserManager\ckfinderFiles</baseDir> <baseURL>http://localhost:10002/UserManager/ckfinderFiles/</baseURL> <licenseKey></licenseKey> <licenseName></licenseName> <imgWidth>1600</imgWidth> <imgHeight>1200</imgHeight> <imgQuality>80</imgQuality> <uriEncoding>UTF-8</uriEncoding> <forceASCII>false</forceASCII> <disallowUnsafeCharacters>false</disallowUnsafeCharacters> <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar> <checkDoubleExtension>true</checkDoubleExtension> <checkSizeAfterScaling>true</checkSizeAfterScaling> <secureImageUploads>true</secureImageUploads> <htmlExtensions>html,htm,xml,js</htmlExtensions> <hideFolders> <folder>.svn</folder> <folder>CVS</folder> </hideFolders> <hideFiles> <file>.*</file> </hideFiles> <defaultResourceTypes></defaultResourceTypes> <types> <type name="Files"> <url>%BASE_URL%files/</url> <directory>%BASE_DIR%files</directory> <maxSize>0</maxSize> <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip </allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Images"> <url>%BASE_URL%images/</url> <directory>%BASE_DIR%images</directory> <maxSize>0</maxSize> <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions> <deniedExtensions></deniedExtensions> </type> <type name="Flash"> <url>%BASE_URL%flash/</url> <directory>%BASE_DIR%flash</directory> <maxSize>0</maxSize> <allowedExtensions>swf,flv</allowedExtensions> <deniedExtensions></deniedExtensions> </type> </types> <accessControls> <accessControl> <role>*</role> <resourceType>*</resourceType> <folder>/</folder> <folderView>true</folderView> <folderCreate>true</folderCreate> <folderRename>true</folderRename> <folderDelete>true</folderDelete> <fileView>true</fileView> <fileUpload>true</fileUpload> <fileRename>true</fileRename> <fileDelete>true</fileDelete> </accessControl> </accessControls> <thumbs> <enabled>true</enabled> <url>%BASE_URL%_thumbs/</url> <directory>%BASE_DIR%_thumbs</directory> <directAccess>false</directAccess> <maxHeight>100</maxHeight> <maxWidth>100</maxWidth> <quality>80</quality> </thumbs> <plugins> <plugin> <name>imageresize</name> <class>com.ckfinder.connector.plugins.ImageResize</class> <params> <param name="smallThumb" value="90x90"></param> <param name="mediumThumb" value="120x120"></param> <param name="largeThumb" value="180x180"></param> </params> </plugin> <plugin> <name>fileeditor</name> <class>com.ckfinder.connector.plugins.FileEditor</class> <params></params> </plugin> </plugins> <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl> </config>
修改baseDir和baseURL配置:
baseDir 是ckfinder文件上传时的绝对路径。
baseURL 是ckeditor访问ckfinder提供的文件的网络路径。
最后,在struts.xml配置文件中增加以下配置:
<!-- ckfinder文件上传配置 --> <constant name="struts.action.excludePattern" value="/ckfinder.*" />ckfinder采用servlet处理文件的,我配置的是struts默认会拦截所有请求,这里需要排除struts2拦截ckfinder的请求,否则ckfinder上传文件会失败。