CKEditor 整合CKFinder实现文件上传及富文本操作

事先说明：此整合的是java版本的
 1,下载需要资源：
      

a) ckeditor_4.4.5 （解压）（原谅我喜欢功能强大的，如果你不喜欢，可以用basic版的）

http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.5/ckeditor_4.4.5_full.zip

b) ckeditor-java-3.6.6.2 （解压）(这个可以作为一个参考来看看，不想下载也可以，也有.Net版的)

http://download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.6.2/ckeditor-java-3.6.6.2.war

c) ckfinder_java_2..4.2 （解压）

http://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.4.2/ckfinder_java_2.4.2.zip


2.MyEclipse新建WebProject：CKFinder

    a.复制以下文件夹到WebRoot下面：

    ckfinder_java_2..4.2 \ckfinder\CKFinderJava\ckfinder

    注意：CKFinder加粗的是war包解压后的文件夹的名称

    ckeditor_4.4.5/ckeditor
    b.复制CKFinder配置文件到WEB-INF下面：

    ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml
    c.复制下面文件夹下面所有jar文件到WEB-INf/lib下面：

    ckfinder_java_2..4.2\ckfinder\CKFinderJava\WEB-INF\lib

    ckeditor_4.4.5\WEB-INF\lib

3．下面删除无用的文件

    首先是ckeditor下面的文件：所有MarkDown文件全部删除。

    _sample,_source,CHANGES.html， INSTALL.html, LICENSE.html

然后是ckfinder下面的文件：

    _samples,help, changelog.txt, install.txt, license.txt,translation.txt

4．修改配置文件config.xml（WEB-INF下面的那个config.xml）
    a.     false   把 false改为 ture
    b. 搜索baseURL并改为   /CKFinder/userfiles/
        注释：这里的CKFinder是你的项目名字，userfiles是你想让文件上传到哪个文件夹里面

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

   
        ConnectorServlet
        com.ckfinder.connector.ConnectorServlet
        
            XMLConfig
            /WEB-INF/config.xml
        
        
            debug
            false
        
        1
    
    
        ConnectorServlet
        /ckfinder/core/connector/java/connector.java
    
    
        FileUploadFilter
        
        com.ckfinder.connector.FileUploadFilter
        
            sessionCookieName
            JSESSIONID
        
        
            sessionParameterName
            jsessionid
        
    
    
        FileUploadFilter
        /ckfinder/core/connector/java/connector.java
    
    
        10
    

6.修改ckeditor/config.js文件的内容
    config.filebrowserBrowseUrl =  '/CKFinder/ckfinder/ckfinder.html' ; 
    config.filebrowserImageBrowseUrl =  '/CKFinder/ckfinder/ckfinder.html?type=Images' ; 
    config.filebrowserFlashBrowseUrl =  '/CKFinder/ckfinder/ckfinder.html?type=Flash' ; 
    config.filebrowserUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ; 
    config.filebrowserImageUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ; 
    config.filebrowserFlashUploadUrl =  '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ; 
    config.filebrowserWindowWidth = '1000'; 
    config.filebrowserWindowHeight = '700'; 
    config.language =  "zh-cn" ; 
    //这是预览
    config.image_previewText = "/CKFinder/img/";

注释：请将CKFinder修改你自己的项目名字

7．修改JSP中的内容：
   
   
   

注意basePath
8.修改Tomcat中的配置为UTF-8
                   connectionTimeout="20000"
               redirectPort="8443"  URIEncoding="utf-8"/>
添加 URIEncoding 
    解释：这个设置中的URIEncoding是为了在访问的时候,即使访问路径中出现中文也能正常访问

OK！  到这里就全都结束了   自己写好你的Action和Service    启动服务试试看你的富文本编辑器是否搞定了！

可是细心的话你会发现是不能上传图片的   所以接着来：
1.打开ckeditor/plugins/image/dialogs/image.js文件，搜索“c.config.image_previewText”就能找到这段鸟语了，(b.config.image_previewText||"")双引号中的内容全删了，注意别删多了。
2.还是image.js这个文件，搜索“upload”可以找到这一段
    id:'Upload',hidden:!0    
实际上是有上传按钮的，不过被隐藏了起来，我们把他设置为显示  改为： id:'Upload',hidden:false


经过这两步  再试试就发现一切OK了！既可以上传图片也可以自定义文章样式  也具备了富文本编辑器！