在本系列的文章中,我將介紹如何在Spring Boot Application中使用CKEditor編輯器。介紹的內容包括基本環境的搭建,文件上傳,SpringData JPA數據持久化,CKEditor5的安裝,CKEditor圖片上傳,CKEditor插入視頻,獲取/設置CKEditor內容等。
項目源碼
本系列文章的項目源碼同步更新至碼雲 和 Github ,你可以任選其一下載源碼到本地。項目地址如下:
- 碼云:
https://gitee.com/ramostear/CKEditor5-SpringBoot
- Github:
https://github.com/ramostear/CKEditor5-SpringBoot
你也可以通過Git命令行工具下載項目源碼,命令如下(二者任選其一):
git clonehttps://gitee.com/ramostear/CKEditor5-SpringBoot.git
git clonehttps://github.com/ramostear/CKEditor5-SpringBoot.git
需求分析
需求分析是項目開始的第一步,經過分析和思考,才能明確我們的設計目標。在本項目中,我們有如下的需求:
- 使用CKEditor5 Web編輯器在線編輯內容
- 在需要的時候,可以在編輯的內容中插入圖片素材
- 除了能插入圖片,還需要有插入視頻的功能
- 將編輯好的內容保存到資料庫
- 在需要的時候,可再次對資料庫中存儲的內容進行二次編輯
- 能在線瀏覽資料庫中的內容
- 在必要的時候,需要對資料庫中存儲的內容進行刪除(包括上傳的圖片)
經過整理,我們可提煉出這樣幾個核心功能:添加內容,編輯內容,刪除內容,查詢內容,上傳圖片,插入視頻和刪除圖片。下面是項目的用例圖,用例圖能更直觀的幫助我們理解項目需求。
項目依賴
通過分析,我們已經明確項目所要實現的功能。接下來,需要考慮項目的類型以及所需要的第三方依賴包和依賴包的管理方式。
首先,我們可以確定該項目是一個Web項目,第三方的依賴包可以通過Maven來進行管理。然後是確定項目所需的依賴包:
- Web項目,需要Spring MVC依賴包;
- 視圖展現,需要Freemarker依賴包;
- 在線編輯內容,使用CKEditor5實現(Java第三方庫);
- 連接MySQL資料庫,需要MySQL資料庫驅動依賴包;
- 數據持久化,需要SpringData JPA依賴包;
- 資料庫連接池管理,需要Alibaba Druid依賴包;
- 文件上傳,需要commons-fileupload依賴包;
- 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類,我們將通過此類來啟動項目。
如上圖所示,在代碼編輯介面中,你可以選擇點擊 、和 處其中任意一個三角圖標來啟動項目。當項目啟動成功後,會在控制台輸出如下信息:
你可以在上圖 處看到,應用的埠號為「8080」(默認埠號)。最後,我們在瀏覽器中輸入如下地址,以驗證SpringBoot Application是否正常可用。
http://localhost:8080
如上圖所示,若初始化的項目無任何問題,訪問http://localhost:8080,SpringBoot Application將返回一個「Whitelable Error Page」頁面。至此,SpringBoot Application環境搭建工作完成。
本章小結
本章詳細介紹了在IntelliJ IDEA中創建並初始化一個SpringBoot Application的詳細過程。為初識IntelliJ IDEA和SpringBoot的讀者提供一個參考。你可以訪問下面的地址,下載該項目的所有原始碼:
- 碼云: https://gitee.com/ramostear/CKEditor5-SpringBoot
- Github: https://github.com/ramostear/CKEditor5-SpringBoot
在下一章節中,我將介紹內容實體,持久化接口,業務邏輯接口及其實現類,和控制器的設計和實現過程。