FCKeditor - Fckeditor使用说明含文件上传功能

大家知道FCKeditor是一款强大的富文本框控件，可能很多人还不知道如何把她加入到项目中，或者知道但是已经忘记了，没关系，我们在这学习学习，复习复习。

1、下载fckeditor
地址：http://ckeditor.com/

2、导入jar包和文件
fckeditor-java-core-2.6.jar
imageinfo-1.9.jar
fckeditor下的js、html等文件，可以删除所有以"_"开头的文件夹

3、导入标签和使用标签

<%@ taglib uri="http://java.fckeditor.net" prefix="fck" %>
<fck:editor instanceName="movInfo.info"></fck:editor>
<fck:editor inputName="movInfo.info" instanceName="movInfomation" toolbarSet="Basic"></fck:editor>

4、自定义工具栏
配置fckconfig.js  

FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
	'/',
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','ShowBlocks','-','About']		// No comma for the last row.
] ;

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

说明：

instanceName 就是相当去控件的name
toolbarSet   就是设置你需要使用的功能样式，在上面定义的，当然你也可以自己增加新的
<fck:editor instanceName="movInfo.info" toolbarSet="Basic"></fck:editor>

5、配置文件上传（与Struts2共存）
由于大部分情况下我们在配置Struts2的过滤器的时候都是用*，所以这边我要绕过她，在这里写一个过滤器先。

package com.main.movie.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

public class FckUploadFilter implements Filter {
	private String DispatcherUrl;
	public void destroy() {

	}

	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest httprequest = (HttpServletRequest) request;
		//其实就是根据传的参数来判断在做什么
		if (httprequest.getParameter("Type") != null && httprequest.getParameter("Type").equals("Image")) {
			//跳转到fck用的页面,不执行后面的过滤器
			httprequest.getRequestDispatcher(DispatcherUrl).forward(request, response);
		} else {
			//否则才继续执行过滤器,所以在配置web.xml的时候要把该过滤器放在struts2的前面
			chain.doFilter(request, response);
		}
	}

	public void init(FilterConfig filterConfig) throws ServletException {
		 DispatcherUrl = filterConfig.getInitParameter("DispatcherUrl");
	}

}

配置struts.xml，加入下面的代码片段

<constant name="struts.multipart.saveDir" value="/tmp"></constant>

6、配置web.xml
注意FCK的过滤器一定要配置在Struts2过滤器的前面

<!-- FckUploadFilter -->
<filter>
	<filter-name>FckUploadFilter</filter-name>
	<filter-class>com.main.movie.filter.FckUploadFilter</filter-class>
	<init-param>
		<param-name>DispatcherUrl</param-name>
		<param-value>/fckeditor/editor/filemanager/connectors/</param-value>
	</init-param>
</filter>
<filter-mapping>
	<filter-name>FckUploadFilter</filter-name>
	<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</filter-mapping>

<!-- Fckeditor -->
<servlet>
	<servlet-name>ConnectorServlet</servlet-name>
	<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
	<servlet-name>ConnectorServlet</servlet-name>
	<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>

7、配置fckeditor.properties(就创建这个文件然后把下面的代码复制进去就行了)

# default allowed extensions settings
connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png
connector.resourceType.flash.extensions.allowed = swf|fla
connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv

# default resource type paths
connector.resourceType.file.path = /file
connector.resourceType.image.path = /image
connector.resourceType.flash.path = /flash
connector.resourceType.media.path = /media

# Due to security issues with Apache modules, it is recommended to leave this 
# setting enabled.
connector.forceSingleExtension = true

# base URL path for the userfiles
connector.userFilesPath = /fckupload

# base system path on the backend for the userfiles
connector.userFilesAbsolutePath = /fckupload

# Instructs the Connector to check, if the uploaded image is really one
connector.secureImageUploads = true

# directory of the editor relative to the context root
fckeditor.basePath = /fckeditor

# default height of the editor
fckeditor.height = 200

# default toolbar set of the editor
fckeditor.toolbarSet = Default

# default width of the editor
fckeditor.width = 100%

# default implementations
connector.impl = net.fckeditor.connector.impl.ContextConnector
connector.userActionImpl = net.fckeditor.requestcycle.impl.EnabledUserAction
connector.userPathBuilderImpl = net.fckeditor.requestcycle.impl.ContextPathBuilder
localization.localeResolverImpl = net.fckeditor.localization.impl.AcceptLanguageHeaderResolver