前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Spring Boot集成CKFinder 顶

Spring Boot集成CKFinder 顶

作者头像
用户2146693
发布2019-08-08 15:06:39
2.5K1
发布2019-08-08 15:06:39
举报
文章被收录于专栏:架构师进阶架构师进阶

Spring Boot集成CKFinder,实现浏览功能。

前言

上一篇记录了Spring Boot集成CKEditor,这里记录Spring Boot集成CKFinder实现浏览功能,详细的配置可以参考ckeditor和ckfinder集成详细配置及其优化,这里讲在Spring Boot中怎么玩CKFinder。ckeditor中“浏览服务器”的后台操作是自己写代码来实现浏览,界面操作不太友好。CKFinder的浏览界面不错,而且还能定制不同的样式。

这里写图片描述
这里写图片描述

集成

1.下载

下载Java 版本的CKFinder,支持Java的最新版本是2.6.2.1,3.x的CKFinder没有提供Java实现。下载后是压缩文件:【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包。

代码语言:javascript
复制
        <!--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的简单集成,下面来说说具体怎么玩。

功能实现

CKFinder集成以后,浏览功能还不能使用。

1.配置路径

在CKEditor的配置文件config.js中配置访问路径。参考官网给出的例子

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

不配置filebrowserImageBrowseUrl,下面的【浏览服务器】按钮是没有的。

这里写图片描述
这里写图片描述

点击浏览服务器:

这里写图片描述
这里写图片描述

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

这个路径是CKFinder内置的,目前没找到怎么修改这个路径。不能修改那就实现这个路径。

2.内置URL实现

查看web.xml文件,看看这个路径是怎么定义的。

这里写图片描述
这里写图片描述

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

这就简单了,写个Servlet来继承它。

这里写图片描述
这里写图片描述

WebCkApplication中添加扫描Servlet的注解

这里写图片描述
这里写图片描述

URL解决了,试试按钮能不能用。

这里写图片描述
这里写图片描述

恩,还是报错从服务器读取xml数据出错,看看log怎么说。

这里写图片描述
这里写图片描述

Configuration不能正确初始化,在初始化读取xml文件的时候报错。。。

3.加载XML文件

1.config.xml文件

web.xml中看到,还需要加载config.xml文件。config.xml\WEB-INF目录下,复制到classpath下,这里重命名为ckfinder.xml

这里写图片描述
这里写图片描述

启用CKFinder,enabled修改为True,默认是false,浏览功能是不能用的。

这里写图片描述
这里写图片描述

配置baseDir,如果没配置baseDir,点击浏览服务器按钮的时候会在临时目录创建以下目录:

这里写图片描述
这里写图片描述

配置的话,在配置路径下也是有同样的目录结构的。和CKEditor上传的路径一致,这样上传的文件也可以直接浏览到。

2.classpath加载Xml文件

参考springboto集成ckfinder,重写Configuration,从classpath下加载Xml文件。

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

Servlet中加载配置

代码语言:javascript
复制
@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就完美实现了。

优化

使用的话就很简单了,这里不再说了。写一下后期的一些优化,是代码更简洁,维护更方便。

1.CKEditor、CKFinder使用同一个存储路径

ckfinder.xml中配置以下路径

代码语言:javascript
复制
<baseDir>F:\\data\\file\\image\\</baseDir>
<baseURL>http://localhost:8180/public/image/</baseURL>

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

这里写图片描述
这里写图片描述

CKFinder返回的URL中会自带images

这里写图片描述
这里写图片描述

所以CKEditor用的存储路径和访问路径改为以下:

代码语言:javascript
复制
#磁盘存储路径
ckeditor.storage.image.path=F:\\data\\file\\image\\images\\
#访问路径
ckeditor.access.image.url=http://localhost:8180/public/image/images/

这样就更好了,CKEditor、CKFinder使用同一个存储路径。

后续会在下个博文里对集成CKFinder做一下详细的优化。

参考

CKEditor与CKFinder学习–整合SpringMVC

ckeditor和ckfinder集成详细配置及其优化

源码

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 集成
    • 1.下载
      • 2.解压
        • 1.ZIP解压
        • 2.War包解压
      • 3.配置
        • 1.资源路径配置
        • 2.Maven依赖配置
    • 功能实现
      • 1.配置路径
        • 2.内置URL实现
          • 3.加载XML文件
            • 1.config.xml文件
            • 2.classpath加载Xml文件
        • 优化
          • 1.CKEditor、CKFinder使用同一个存储路径
          • 参考
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档