Spring Boot集成CKFinder,實現(xiàn)瀏覽功能。

前言

上一篇記錄了Spring Boot集成CKEditor,這里記錄Spring Boot集成CKFinder實現(xiàn)瀏覽功能，詳細(xì)的配置可以參考ckeditor和ckfinder集成詳細(xì)配置及其優(yōu)化，這里講在Spring Boot中怎么玩CKFinder。ckeditor中“瀏覽服務(wù)器”的后臺操作是自己寫代碼來實現(xiàn)瀏覽，界面操作不太友好。CKFinder的瀏覽界面不錯，而且還能定制不同的樣式。

這里寫圖片描述

集成

1.下載

下載Java 版本的CKFinder，支持Java的最新版本是2.6.2.1，3.x的CKFinder沒有提供Java實現(xiàn)。下載后是壓縮文件：【ckfinder_java_2.6.2.1.zip】

2.解壓

1.ZIP解壓

ZIP解壓后的目錄：

這里寫圖片描述

_source:源代碼；
CKFinderJava-2.6.2.1.war:war包，可以直接在Tomcat下面運行。

2.War包解壓

解壓War包：

這里寫圖片描述

直接把ckfinder文件夾拷貝到static目錄下面，和集成CKEditor一樣。

這里寫圖片描述

3.配置

1.資源路徑配置

WebMvcConfig中添加配置，把CKFinder添加到Spring Boot的資源路徑中，定義訪問路徑，便于訪問。

registry.addResourceHandler("/ckfinder/**").addResourceLocations("classpath:/static/ckfinder/");

2.Maven依賴配置

CKFinderJava-2.6.2.1\WEB-INF\lib下是用到的jar，pom中配置主要的jar包。

        <!--CKFinder start-->
        <dependency>
            <groupId>com.ckfinder</groupId>
            <artifactId>CKFinder</artifactId>
            <version>2.6.2.1</version>
        </dependency>
        <dependency>
            <groupId>net.coobird</groupId>
            <artifactId>thumbnailator</artifactId>
            <version>0.4.8</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.2.2</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.0.1</version>
        </dependency>
        <!--CKFinder end-->

這是CKFinder的簡單集成，下面來說說具體怎么玩。

功能實現(xiàn)

CKFinder集成以后，瀏覽功能還不能使用。

1.配置路徑

在CKEditor的配置文件config.js中配置訪問路徑。參考官網(wǎng)給出的例子

config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?type=Images'

不配置filebrowserImageBrowseUrl，下面的【瀏覽服務(wù)器】按鈕是沒有的。

這里寫圖片描述

點擊瀏覽服務(wù)器：

這里寫圖片描述

/ckfinder/core/connector/java/connector.java不可用，找不到。。。

這個路徑是CKFinder內(nèi)置的，目前沒找到怎么修改這個路徑。不能修改那就實現(xiàn)這個路徑。

2.內(nèi)置URL實現(xiàn)

查看web.xml文件，看看這個路徑是怎么定義的。

這里寫圖片描述

可以看到
/ckfinder/core/connector/java/connector.java
是由Servletcom.ckfinder.connector.ConnectorServlet來處理的。

這就簡單了，寫個Servlet來繼承它。

這里寫圖片描述

WebCkApplication中添加掃描Servlet的注解

這里寫圖片描述

URL解決了，試試按鈕能不能用。

這里寫圖片描述

恩，還是報錯從服務(wù)器讀取xml數(shù)據(jù)出錯，看看log怎么說。

這里寫圖片描述

Configuration不能正確初始化，在初始化讀取xml文件的時候報錯。。。

3.加載XML文件

1.config.xml文件

從web.xml中看到，還需要加載config.xml文件。config.xml在\WEB-INF目錄下，復(fù)制到classpath下，這里重命名為ckfinder.xml。

這里寫圖片描述

啟用CKFinder，enabled修改為True，默認(rèn)是false，瀏覽功能是不能用的。

這里寫圖片描述

配置baseDir，如果沒配置baseDir，點擊瀏覽服務(wù)器按鈕的時候會在臨時目錄創(chuàng)建以下目錄：

這里寫圖片描述

配置的話，在配置路徑下也是有同樣的目錄結(jié)構(gòu)的。和CKEditor上傳的路徑一致，這樣上傳的文件也可以直接瀏覽到。

2.classpath加載Xml文件

參考springboto集成ckfinder，重寫Configuration，從classpath下加載Xml文件。

DefaultResourceLoader loader = new DefaultResourceLoader();
Resource resource = loader.getResource(this.xmlFilePath);

Servlet中加載配置

@WebServlet(urlPatterns = "/ckfinder/core/connector/java/connector.java", initParams = {
        @WebInitParam(name = "XMLConfig", value = "classpath:ckfinder.xml"),
        @WebInitParam(name = "debug", value = "false"),
        @WebInitParam(name = "configuration", value = "com.wxs.ckeditor.config.CKFinderConfig")
})
public class ImageBrowseServlet extends ConnectorServlet {
}

到這里，Spring Boot集成CKFinder就完美實現(xiàn)了。

優(yōu)化

使用的話就很簡單了，這里不再說了。寫一下后期的一些優(yōu)化，是代碼更簡潔，維護更方便。

1.CKEditor、CKFinder使用同一個存儲路徑

ckfinder.xml中配置以下路徑

<baseDir>F:\\data\\file\\image\\</baseDir>
<baseURL>http://localhost:8180/public/image/</baseURL>

http://localhost:8180/public/image/是在WebMvcConfig中定義的

這里寫圖片描述

CKFinder返回的URL中會自帶images

這里寫圖片描述

所以CKEditor用的存儲路徑和訪問路徑改為以下：

#磁盤存儲路徑
ckeditor.storage.image.path=F:\\data\\file\\image\\images\\
#訪問路徑
ckeditor.access.image.url=http://localhost:8180/public/image/images/

這樣就更好了，CKEditor、CKFinder使用同一個存儲路徑。

后續(xù)會在下個博文里對集成CKFinder做一下詳細(xì)的優(yōu)化。

參考

CKEditor與CKFinder學(xué)習(xí)--整合SpringMVC

ckeditor和ckfinder集成詳細(xì)配置及其優(yōu)化

源碼