HTML编辑器 -- CKEditor4.2(工具栏配置等)与CKFinder2.3整合(上传文件)

首先下载CKEditor4.2与CKFinder2.3破解版还有JAVA开发的核心包3.5

地址：

CKEditor4.2：        http://download.csdn.net/detail/xiayuzheng/5814361

CKFinder2.3破解版：http://download.csdn.net/detail/xiayuzheng/5814451

Java开发核心包3.5： http://download.csdn.net/detail/xiayuzheng/5814383

1.必须把解压出来的ckedictor文件夹ckfinder文件夹放到 根目录下 ,本人是放到 WebRoot下，否则会出现按钮图片缺失的情况。

  ckeditor-java-core-3.5.3下面的3个jar包放到lib下,

  ckfinder解压出来后的路径为ckfinder\CKFinderJava\WEB-INF\lib下的jar包也放到项目的lib下。

2.引入2个ckeditor与ckfinder中的js文件：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>  

3.创建一个textarea

 <textarea class="ckeditor" name="content" id="content" ></textarea>        //这里创建编辑器的方法是通过调用ckeditor这个class.

4.写一段Js脚本

<script type="text/javascript">
		//这里我用的Jquery,那需要引入Jquery的js文件.如没有用到,可以不用引入。
		$(function()
		{
			var editor = CKEDITOR.replace( 'content', 
			{
			    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'  ,
				//uiColor: '#14B8C4',
				language : 'zh-cn',
				width:1000,
				height:400,
				//自定义工具栏,这里不写,默认显示全部
				toolbar :
				[
				     ['Source','Styles', 'Format','FontSize','Font'],
				     ['TextColor', '-' ,'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link','Unlink','-','Cut','Copy','Paste','-','Image','Flash','Smiley','Maximize']
				]				
				
			});
			//将ckfinder设置到设置到ckeditor
			CKFinder.setupCKEditor( editor,'/ckfinder/' );

		})
		</script>

5.web.xml中添加以下配置，原先struts2及其spring的配置都不变：

1. <!-- ckfinder文件上传配置 start -->  
2.     <servlet>  
3.         <servlet-name>ConnectorServlet</servlet-name>  
4.         <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>  
5.         <init-param>  
6.             <param-name>XMLConfig</param-name>  
7.             <param-value>/WEB-INF/config.xml</param-value>  
8.         </init-param>  
9.         <init-param>  
10.             <param-name>debug</param-name>  
11.             <param-value>false</param-value>  
12.         </init-param>  
13.         <load-on-startup>1</load-on-startup>  
14.     </servlet>  
15.     <servlet-mapping>  
16.         <servlet-name>ConnectorServlet</servlet-name>  
17.         <url-pattern>  
18.             /ckfinder/core/connector/java/connector.java  
19.         </url-pattern>  
20.     </servlet-mapping>  
21.     <filter>  
22.         <filter-name>FileUploadFilter</filter-name>  
23.         <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>  
24.         <init-param>  
25.             <param-name>sessionCookieName</param-name>  
26.             <param-value>JSESSIONID</param-value>  
27.         </init-param>  
28.         <init-param>  
29.             <param-name>sessionParameterName</param-name>  
30.             <param-value>jsessionid</param-value>  
31.         </init-param>  
32.     </filter>  
33.     <filter-mapping>  
34.         <filter-name>FileUploadFilter</filter-name>  
35.         <url-pattern>  
36.             /ckfinder/core/connector/java/connector.java  
37.          </url-pattern>  
38.     </filter-mapping>  
39.     <!-- ckfinder文件上传配置 end -->  

6.把下载的ckfinder包中WEB-INF目录下的config.xml文件拷贝过来，放到自己项目的WEB-INF目录下。

config.xml：

<config>
	<enabled>true</enabled>
	<!-- ckfinder文件上传时的绝对路径。 -->
	<baseDir>E:\ALearning\Java\IDE工具\Apache-Tomcat-6.0\webapps\personal_blog\userfiles</baseDir>
	<!-- ckeditor访问ckfinder提供的文件的网络路径。 -->
	<baseURL>/personal_blog/userfiles/</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>

7.最后，在struts.xml配置文件中增加以下配置：

        <!-- ckfinder文件上传配置 --> 
    	<constant name="struts.action.excludePattern" value="/ckeditor/.*,/ckfinder/.*"/>

ckfinder采用servlet处理文件的，我配置的是struts默认会拦截所有请求，这里需要排除struts2拦截ckfinder的请求，否则ckfinder上传文件会失败。

整合完毕！！！！！！！

增加中文字体,自定义表情

在ckeditor文件夹下的config.js中增加以下代码

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	//增加以下代码
	//设置自定义皮肤
	config.skin='moonocolor'
	//清空缓存,添加中文字体
	config.font_names = "宋体/宋体;黑体/黑体;隶书/隶书;楷体/楷体;" + config.font_names;
	//自定义表情
	//CKEditor.basePath -- 包含CKEditor的安装目录的完整URL 
	config.smiley_path=CKEDITOR.basePath+"plugins/smiley/qqFaceImage/";
	config.smiley_images = [
	                        '0.gif', '1.gif', '2.gif', '3.gif', '4.gif', '5.gif',
	                        '6.gif', '7.gif', '8.gif', '9.gif', '10.gif', '11.gif',
	                        '12.gif', '13.gif', '14.gif', '15.gif', '16.gif', '17.gif',
	                        '18.gif', '19.gif', '20.gif', '21.gif', '22.gif', '23.gif',
	                       ]
	
};

最后截几张图：