然后开始整合Struts2和CKeditor
首先配置fck.xml文件,需要注意的是<baseURL>/Files/</baseURL>这里指的应用相对路径,如上图所示,而<baseDir></baseDir>指的绝对路径。这里推荐使用相对路径,路径的作用是后面文件管理器读取文件时的路径。在后面的xml节点中还可以配置上传图片时加载哪个文件夹,加载其他文件加载文件夹名,还可以设置上传文件规定的后缀名,还有图片的长宽值,隐藏哪些文件夹,还有文件缩略图的大小参数等等。
<config>
<enabled>true</enabled>
<baseDir></baseDir>
<baseURL>/Files/</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>
然后配置web.xml文件,这里servlet一定要配置在Struts2拦截器前面。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>Struts2_FCK</display-name>
<welcome-file-list>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<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/ckfinder.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>
/FckEditor/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>10</session-timeout>
</session-config>
<filter>
<filter-name>struts2Filter</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2Filter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
然后是配置个性化的ckeditor界面,而且要想集成ckfinder必须按下面配置ckeditor文件夹下的config.js文件:
CKEDITOR.editorConfig = function(config) {
config.language = 'zh-cn';//配置语言
config.uiColor = '#FFF';//背景颜色
config.width = '800px';//宽度
config.height = '300px';//高度
config.skin = 'office2003';//编辑器皮肤样式: office2003
//config.toolbar = "Full"; //工具栏样式 全能工具栏:Basic
config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;' + config.font_names;
config.toolbar =
[
['Source', 'Preview', '-'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'], '/',
['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
'/',
['Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
//ckfinder配置
config.filebrowserBrowseUrl = 'FckEditor/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'FckEditor/ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = 'FckEditor/ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = 'fileUpload?type=file';
config.filebrowserImageUploadUrl = 'imageUpload?type=image';
config.filebrowserFlashUploadUrl = 'flashUpload?type=flash';
config.filebrowserWindowWidth = '800';
config.filebrowserWindowHeight = '480';
};
最后是破解ckfinder,因为ckfinder并不是免费的,所以需要破解才能得到所有功能和去除水印,在网上有很多方法,不过我这里已经整合好,完全免费而且无水印版本,在下面附件中下载。
JSP页面,其实有三种方法调用ckeditor,可以用他自己的标签库,也可以用css方法。我这里使用的是js加载,个人觉得在各浏览器最兼容。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FCK</title>
<script type="text/javascript" src="FckEditor/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function check(){
var editor_data = CKEDITOR.instances.editor.getData();
if(editor_data == ""){
alert("请输入内容后再提交");
return false;
}else return true;
}
</script>
</head>
<center>
<body>
<form action="save" method="post" onsubmit="return check();">
<textarea id="editor" name="content" cols="30" rows="4" ></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor',{
filebrowserImageUploadUrl:'imageUpload?type=image',
filebrowserFlashUploadUrl:'flashUpload?type=flash'
});
</script>
<input type="reset" value="重置"/> <input type="submit" value="提交">
</form>
</body>
</center>
</html>
这里鼠标右键点击图片缩略图可以进行下载,如果破解权限后,还可以在文件夹之间互相拖动达到复制粘贴的目的。附件中我破解好的最新版本
当点击文件上传按钮时调用的action就是'imageUpload?type=image',然后结合我以前对struts2文件上传下载的博文中讲到的知识对文件数据进行组织,文件字段这里默认是upload字段,所以在后台可以通过这个字段得到文件类型,文件名和文件二进制数据,最后可以通过IO写入到其他文件夹或者存入数据库即可。