CKFinder实现文件上传功能
                                       
本文使用：jsp整合ckeditor和ckfinder完成在网页上嵌套文本编辑器，并实现图片上传功能。
在项目中我们曾经可能都使用过FckEditor文本编辑器，该技术在论坛、互联网的项目中显得尤为重要。但现在最新又出来了个ckEditor，其实我们到官方网站看看就知道FckEditor在2.6版本之后就改名为ckEditor了。但是这个CkEditor本身支持在页面上嵌套文本编辑器功能，不支持图片、文件、flash文件上传等功能，那该怎么办呢？你可以在文本编辑器的基础上自己开发图片上传功能，当然也可以使用CKFinder插件，我们这里就给大家介绍一下CKEditor与 CKFinder 整合项目开发，完成文本编辑器功能以及图片上传功能。
  FckEditor里有java版本的配置，可以支持php、asp.net、java等不同版本，现在一下子变为ckEditor了。配置更加简单，效果也更加美观，我们直接下载ckEditor就可以使用，我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧，那我们不妨下载CKFinder的插件辅助完成这项功能。
    下面给大家介绍操作的步骤，大家不妨动手试试看啊。

一．需要的资源：

请大家到网站上下载对应的3个包:
a) ckeditor_3.6.2 （解压）
b) ckeditor-java-3.6.2 （解压）
c) ckfinder_java_2.3.1 （解压）
其中：
ckeditor_3.6.2：实现页面文本编辑器功能
ckeditor-java-3.6.2：实现文本编辑器的java源码包
ckfinder_java_2.3.1：实现文件上传，图片上传的java源码包

二．执行步骤：

第1步.MyEclipse新建 Web工程 ：例如itcastCKEditor。
第2步.解压ckfinder_java_2.3.1，导入相应的jar包，目录在ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\lib下的8个jar包。 以及：ckeditor-java-3.6.2\WEB-INF\lib下的1个jar包，共9个包  
第3步. 复制以下文件夹到WebRoot 下面：
（1）目录：ckfinder_java_2.3.1\ckfinder\CKFinderJava\ckfinder （2）目录：ckeditor_3.6.2\ckeditor 第4步. 复制 CKFinder配置文件 到项目的WEB-INF 下面：
ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\config.xml的config.xml放置到项目的WEB-INF下面，这个配置文件需要我们配置一些信息，别着急，往后看。

三．下面删除无用的文件，建议删除，可减少项目的碎片文件

首先是ckeditor文件夹下面的文件：
_sample文件夹,_source文件夹, CHANGES.html， ckeditor_php4.php ，  ckeditor_php5.php, 
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html
然后是ckfinder文件夹下面的文件：
_samples文件夹, help文件夹, changelog.txt, install.txt, license.txt, translation.txt

四．修改配置文件config.xml

Xml代码

true 

/userfiles/  
其中：红色部分为修改的代码。
注意：如果发现附件上传成功，但是不能将正确的路径带到URL的时候，可以试图修改以下代码：即：添加项目名称在标签中。

       
            /itcastCKEditor%BASE_URL%files/
            %BASE_DIR%files
            0
        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
           
           
       
       
            /itcastCKEditor%BASE_URL%images/
            %BASE_DIR%images
            0
            bmp,gif,jpeg,jpg,png
           
       
       
            /itcastCKEditor%BASE_URL%flash/
            %BASE_DIR%flash
            0
            swf,flv
           
       

五．在web.xml 中配置：

即将CKFinder文件上传的插件需要通过的配置才能整合到项目中，所以需要在web.xml中添加：
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
< servlet >
   < servlet-name > ConnectorServlet
   < servlet-class > com.ckfinder.connector.ConnectorServlet
   < init-param >
        < param-name > XMLConfig
        < param-value > /WEB-INF/config.xml
   
    < init-param >
          < param-name > debug
          < param-value > false
    
< load-on-startup > 1

 < servlet-mapping >
        < servlet-name > ConnectorServlet
       < url-pattern >/ckfinder/core/connector/java/connector.java

< filter >
FileUploadFilter
    com.ckfinder.connector.FileUploadFilter
                 < init-param >
                     < param-name >sessionCookieName
                     < param-value >JSESSIONID
                
                 < init-param >
                     < param-name >sessionParameterName
                     < param-value >jsessionid
                

< filter-mapping >
        < filter-name > FileUploadFilter
        < url-pattern >/ckfinder/core/connector/java/connector.java

< session-config >
< session-timeout > 10

六. 修改项目中WebRoot下的ckeditor/config.js文件的内容

该文件配置文本编辑器在页面上显示的样式，以及整合CKFinder插件。
Js代码
CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
     
    //配置默认配置
    config.language = 'zh-cn'; //配置语言
    config.uiColor = '#FFF'; //背景颜色
    config.width = 400; //宽度
config.height = 400; //高度
    config.skin = 'v2'; //编辑器皮肤样式，office，kama风格
    // 取消 “拖拽以改变尺寸”功能
    config.resize_enabled = false;
    // 使用基础工具栏
    // config.toolbar = "Basic";
    // 使用全能工具栏
    // config.toolbar = "Full";
    //使用自定义工具栏
     config.toolbar =
     [
     ['Source', 'Preview', '-'],
     ['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']
     ];
/*** 这里需要配置文件上传功能的CKFinder插件*/
    config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = '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';
};CKEDITOR.editorConfig =  function (config) {
    config.filebrowserBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html' ;
    config.filebrowserImageBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;
    config.filebrowserFlashBrowseUrl =  '/CKEditor_Finder/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';
};
注意：红色的代码一定要配置，如ckfinder/ckfinder.html表示在项目的根目录下需要配置，例如itcastCKEditor/ckfinder/ckfinder.html，但如果在项目的根目录下出现命名空间，例如itcastCKEditor/system/ckfinder/ckfinder.html中的system，此时可以使用../ckfinder/ckfinder.html相对路径的方式寻找路径，保证路径的准确。

七．修改index.jsp页面的内容：

Jsp代码如下：
<%@ page language="java" pageEncoding="utf-8"%>



 
  
 
 
 
   
       

           
               
               
               
           
       

   
 

 
访问http://localhost:8080/itcastCKEditor/可以看到效果：

八：注意：

上传图片出现问题，图片不能上传到指定的位置。
    原因：fck的servlet被struts2转发了，不能使用/*过滤掉所以的url
    解决：在web.xml中修改filter-mapping 将

    struts2
    org.apache.struts2.dispatcher.FilterDispatcher


    struts2
/*

 修改成

   struts2
   org.apache.struts2.dispatcher.FilterDispatcher


   struts2
    *.do
    *.jsp

 本文版权归澳门大阳城APP入口Java培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：澳门大阳城APP入口Java培训学院
首发：http://www.itcast.cn/javaee