spring mvc 集成 ckfinder

下載ckfinder :

http://cksource.com/ckfinder/download

 下載下來 war包 放到tomcat 的webapps 下面運行一下，然后拿到ckfinder 文件夾 放到項目中

 

將tomcat 中 ckfinder下的 WEB-INF中 config.xml 拷貝到項目的WEB-INF 中 說下config.xml 的設置

  <enabled>true</enabled><!-- 是否啟動CKFinder，默認是false，需要手動改成true -->  
    <baseDir></baseDir><!-- 文件、圖片存放的物理路徑，會在指定路徑下自動創建目錄結構。最好不要設置，如果為空會在web應用根目錄下創建對應的文件夾，如果設置在與CKEditor整合后根據URL找不到圖片-->  
    <baseURL>/ck/userfiles/</baseURL><!-- 上傳文件夾的URL配置，注意：需要添加發布的項目名，不添加則無法預覽，添加錯了則找不到文件 -->  
    <licenseKey></licenseKey>  
    <licenseName></licenseName>  
    <imgWidth>1600</imgWidth>  
    <imgHeight>1200</imgHeight>  
    <imgQuality>80</imgQuality>  
    <uriEncoding>UTF-8</uriEncoding>  
    <forceASCII>false</forceASCII>  

在web.xml中添加支持CKFinder的Servlet。

 <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的放置路徑保持一致 -->  
            /plugin/ckfinder/core/connector/java/connector.java  
        </url-pattern>  
    </servlet-mapping>  

 

頁面上使用：

 <script type="text/javascript" src="${webRoot}/plugin/ckfinder/ckfinder.js"></script>
 
 <input type="text" class="form-control" id="url" >
 <input type="submit" id="add" class="btn btn-default" onclick="BrowseServer()" value="選擇圖片">
 <script>
   function BrowseServer()
                {
                var finder = new CKFinder() ;
                finder.basePath = '${webRoot}/plugin/ckfinder/';  //導入CKFinder的路徑
                finder.selectActionFunction = SetFileField; //設置文件被選中時的函數
               // finder.selectActionData = inputId;  //接收地址的input ID
                finder.popup() ;
                }
                
                //文件選中時執行
                function SetFileField(fileUrl,data)
                {
                    document.getElementById("url").value = fileUrl ;
                }
                
</script>

只是簡單集成可用。具體的一些配置再看吧。