vlambda博客
学习文章列表

在本系列的文章中，我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建，文件上传，SpringData JPA数据持久化，CKEditor5的安装，CKEditor图片上传，CKEditor插入视频，获取/设置CKEditor内容等。

项目源码

• 码云：

https://gitee.com/ramostear/CKEditor5-SpringBoot

• Github：

https://github.com/ramostear/CKEditor5-SpringBoot

你也可以通过Git命令行工具下载项目源码，命令如下(二者任选其一)：

git clone https://gitee.com/ramostear/CKEditor5-SpringBoot.git

git clone https://github.com/ramostear/CKEditor5-SpringBoot.git

需求分析

需求分析是项目开始的第一步，经过分析和思考，才能明确我们的设计目标。在本项目中，我们有如下的需求：

1. 使用CKEditor5 Web编辑器在线编辑内容

2. 在需要的时候，可以在编辑的内容中插入图片素材

3. 除了能插入图片，还需要有插入视频的功能

4. 将编辑好的内容保存到数据库

5. 在需要的时候，可再次对数据库中存储的内容进行二次编辑

6. 能在线浏览数据库中的内容

7. 在必要的时候，需要对数据库中存储的内容进行删除(包括上传的图片)

经过整理，我们可提炼出这样几个核心功能：添加内容，编辑内容，删除内容，查询内容，上传图片，插入视频和删除图片。下面是项目的用例图，用例图能更直观的帮助我们理解项目需求。

项目依赖

通过分析，我们已经明确项目所要实现的功能。接下来，需要考虑项目的类型以及所需要的第三方依赖包和依赖包的管理方式。

首先，我们可以确定该项目是一个Web项目，第三方的依赖包可以通过Maven来进行管理。然后是确定项目所需的依赖包：

1. Web项目，需要Spring MVC依赖包；

2. 视图展现，需要Freemarker依赖包；

3. 在线编辑内容，使用CKEditor5实现(JavaScript第三方库)；

4. 连接MySQL数据库，需要MySQL数据库驱动依赖包；

5. 数据持久化，需要SpringData JPA依赖包；

6. 数据库连接池管理，需要Alibaba Druid依赖包；

7. 文件上传，需要commons-fileupload依赖包；

8. JSON数据转换，需要Alibaba FastJSON依赖包。

提示：

在编码的过程中，为了防止一次性导入所有依赖包导致依赖包下载慢或下载失败，可根据开发进度，按需加入相关的依赖包。

创建项目

在开始创建项目之前，我默认你已经在本地机器上安装并配置好了JDK、Maven和MySQL。创建并初始化一个Java Web项目的最好方式是使用SpringBoot，我将使用IntelliJ IDEA提供的Spring Initializr创建SpringBoot应用程序。关于IDE的选择，在此不再赘述，IntelliJ IDEA或Eclipse创建SpringBoot应用程序的步骤大致相同。

IntelliJ IDEA创建SpringBoot Application

启动IntelliJ IDEA，依次点击 File > New > Project…按钮，如下图：

在弹出的New Project对话框中，选择“Spring Initializr”选项，然后将“Project SDK”修改为本机安装的SDK，接着点击“Next”进入项目元数据配置对话框。

紧接着，我们需要对项目的元数据进行设置，具体参数可更具自身情况进行调整，也可以与本教程保持一致，元数据设置完毕后，点击“Next”进入依赖配置对话框。

为了快速完成项目项目的创建和初始化工作，在一开始，我们只勾选Spring Web依赖，并将Spring Boot的版本调整到2.2.8，然后点击“Next”进入项目信息确认对话框。

在项目信息确认无误后，点击“Finish”按钮完成项目的创建。

最后，IntelliJ IDEA会弹出一个询问框，你可以选择在当前窗口或新窗口打开项目，根据个人习惯进行选择。选择完毕后，稍等片刻，IntelliJ IDEA将自动从Spring上下载项目基础源码包，并完成项目初始化工作。

打开项目后，请在Settings中找到Maven配置项，并检查其配置是否为本地安装的Maven，如下图：

设置完成后，点击窗口右下角弹框中的“Enable Auto Import”链接，让Maven重新导入项目的依赖(若已设置好Maven，请忽略该步骤)，如下图：

下面是初始化完成后的项目工程结构：

至此，整个项目的创建和初始化工作已完成。Ckeditor5SpringBootApplication.java为项目的主类，接下来，我们将通过改类来启动项目，验证项目是否正常可用。

启动项目

在“com.ramostear.ckeditor”包中找到并打开

Ckeditor5SpringbootApplication.java类，我们将通过此类来启动项目。

如上图所示，在代码编辑界面中，你可以选择点击① 、②和 ③处其中任意一个三角图标来启动项目。当项目启动成功后，会在控制台输出如下信息：

http://localhost:8080

如上图所示，若初始化的项目无任何问题，访问http://localhost:8080，SpringBoot Application将返回一个“Whitelable Error Page”页面。至此，SpringBoot Application环境搭建工作完成。

本章小结

• 码云：

  https://gitee.com/ramostear/CKEditor5-SpringBoot

• Github：

  https://github.com/ramostear/CKEditor5-SpringBoot

在下一章节中，我将介绍内容实体，持久化接口，业务逻辑接口及其实现类，和控制器的设计和实现过程。