Struts2整合之CKeditor和CKfinder

一日一博

浏览: 229884 次
性别:
来自: 武汉

最近访客更多访客>>

zhangthe9

存储炒菜错

zhaohuaxishiwzw

pywang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Struts2

struts2 CKeditor CKfinder FCKEditor

先从官网上下载好最新的CKeditor和CKfinder包之后，解压ckeditor和ckfinder，把ckeditor和ckfinder放在同一个文件夹里面。如下图：

然后开始整合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="重置"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="提交">
		</form>
	</body>
</center>
</html>

这里鼠标右键点击图片缩略图可以进行下载，如果破解权限后，还可以在文件夹之间互相拖动达到复制粘贴的目的。附件中我破解好的最新版本

当点击文件上传按钮时调用的action就是'imageUpload?type=image'，然后结合我以前对struts2文件上传下载的博文中讲到的知识对文件数据进行组织，文件字段这里默认是upload字段，所以在后台可以通过这个字段得到文件类型，文件名和文件二进制数据，最后可以通过IO写入到其他文件夹或者存入数据库即可。