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设置到设置到ckeditorCKFinder.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',                       ]};

最后截几张图：