富文本编辑器，CKEditor与 CKFinder 整合并实现文件上传功能

事先说明：此整合的是java版本的,用到的有：jsp + ckeditor + ckfinder。
  在之前的项目中，富文本编辑器使用的是FckEditor，但最新又出来个ckEditor，查看官方网站才知道FckEditor在2.6版本之后就改名为ckEditor了。
  FckEditor里有java版本的配置，可以支持php、asp.net、java版本，现在一下子变为ckEditor了。配置简单的编辑器很简单，我们下载ckEditor就可以使用，我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧。
一.需要的资源：
  1.ckeditor_3.6.2 （解压）
  2.ckeditor-java-3.6.2 （解压）
  3.ckfinder_java_2.3.1 （解压）
二.步骤：
  1.eclipse中创建动态web项目，例如：ckEditor
  2.解压ckfinder_java_2.3.1,导入相应的包,目录在ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\lib下的8个包，以及ckeditor-java-3.6.2\WEB-INF\lib下的1个包，总共9个包。备注：如果你是将CKEditor与 CKFinder整合到你的项目中，那么ckfinder下的commons-io-2.0.1.jar和commons-fileupload-1.2.2.jar如果在你的项目中已经存在就没必要再引入了。
  3.查找ckfinder_java_2.3.1\ckfinder_sources\CKFinder for Java\CKFinder\src\main\java 中的包，并将包放置到项目的src下。
  4.复制以下文件夹到WebRoot 下面：
    1. ckfinder_java_2.3.1\ ckfinder\CKFinderJava\ckfinder
    2. ckeditor_3.6.2\ckeditor
  5.复制 CKFinder配置文件 到WEB-INF 下面： ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\config.xml
三.删除无用的文件
  1.首先是ckeditor 下面的文件：_sample,_source, CHANGES.html， ckeditor_php4.php ， ckeditor_php5.php,
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html
  2.然后是ckfinder 下面的文件： _samples, help, changelog.txt, install.txt, license.txt, translation.txt
四.修改配置文件config.xml

<enabled> true </enabled>    --要想支持上传必须把这里改为true
<baseURL>/CKEditor/userfiles/</baseURL>   --这里的/CKEditor 是项目名

五.在web.xml中增加如下代码：

<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/config.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>/ckfinder/core/connector/java/connector.java
    </url-pattern>
</servlet-mapping>  
<filter>
    <filter-name>FileUploadFilter</filter-name>
    <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
    <init-param>
        <param-name>sessionCookieName</param-name>
        <param-value>JSESSIONID</param-value>
    </init-param>
    <init-param>
        <param-name>sessionParameterName</param-name>
        <param-value>jsessionid</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>FileUploadFilter</filter-name>
    <url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>
</filter-mapping>
<session-config>
    <session-timeout>10</session-timeout>
</session-config>

六.修改ckeditor/config.js文件的内容

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function(config) {
    // config.htmlEncodeOutput = true;
    // config.startupOutlineBlocks = false;
    // config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;' +
    // '隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
    // 配置默认配置
    config.language = 'zh-cn'; // 配置语言
    config.uiColor = '#FFF'; // 背景颜色
    config.width = 400; // 宽度
    config.height = 400; // 高度
    config.skin = 'office2003'; // 编辑器皮肤样式 界面v2,kama,office2003
    config.resize_enabled = true;// 取消 “拖拽以改变尺寸”功能
    // 工具栏的风格Basic Full
    // config.toolbar = "Basic";
    config.toolbar = "Full";
    // 使用自定义工具栏
//  config.toolbar = [
//      [ 'Source', '-' ],
//      [ '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' ] 
//  ];
    //文件上传的配置     -- /CKEditor这个路径是项目名
    config.filebrowserBrowseUrl = '/CKEditor/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = '/CKEditor/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = '/CKEditor/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = '/CKEditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '/CKEditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = '/CKEditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};
//注意：如ckfinder/ckfinder.html表示在项目的根目录下需要配置，例如：项目名/ckfinder/ckfinder.html，但如果在项目的根目录下出现：项目名名/system/ckfinder/ckfinder.html，此时可以使用../ckfinder/ckfinder.html，寻找路径。 

七.修改index.jsp文件的内容

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
  <head>
   <script type="text/javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath }/ckfinder/ckfinder.js"></script>
  </head> 
  <body>
    <form  name="frmList"  action="" enctype="multipart/form-data">
      <div align="center">
        <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td valign="top" width="63%" height="100%">
              <table width="100%" cellpadding="0">  
                <tr id="content1">
                  <td class="tdRight">
                    <textarea id="ebreContent" name="ebreContent" rows="8" cols="52" class="ckeditor"></textarea>
                    <script type="text/javascript">
                     /*  if( CKEDITOR.instances['ebreContent'] ){    
                        CKEDITOR.remove(CKEDITOR.instances['ebreContent']);    
                      }  */ //解决 例外被抛出且未被接住 问题
                      CKEDITOR.replace("ebreContent",{ height: 200, width: 820 });
                      //CKFinder.setupCKEditor(editor,'../ckfinder/');
                    </script>
                  </td>
                </tr> 
              </table> 
            </td>
          </tr>
        </table>
      </div>
    </form>
  </body>
</html> 

八.如果出现中文问题，有一个重要的操作上面没有提及，这个操作就是：找到Tomcat/config/server.xml

 <Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" 
  redirectPort="8443" URIEncoding="utf-8" />

这个设置中的URIEncoding 是为了在访问的时候,即使访问路径中出现中文也能正常访问。