一、背景

采用若依框架搭建了一個小型的電子書項目，項目前端、后端、移動端就一人，電子書的章節內容是以富文本內容進行呈現的，產品設計人員直接給了一個第三方收費的富文本編輯器截圖放到開發文檔中，提了一沓需求點，概況下來就是要做成下圖中的樣子。作為一個后端開發人員為了盡量滿足產品對富文本編輯器上豐富的功能按鈕的執念，對著搜索引擎與AI一頓瘋狂的輸入，大致得出UEditorPlus富文本編輯器可行，在與產品設計溝通后確認采用它來實現。

二、UEditorPlus

UEditorPlus是基于 UEditor 二次開發的富文本編輯器，界面功能比較豐富和現代，相關介紹可以查看官方網站，https://open-doc.modstart.com/ueditor-plus/，此處提供一張demo截圖：

三、與若依框架集成

UEditorPlus與若依框架集成過程，大體上分為前端和后端兩部分。前端主要是安裝富文本插件，配置插件，后端主要是為了支持富文本編輯器的內容上傳（比如，圖片上傳、視頻上傳等）。

1.前端集成

項目采用的若依前后端分離框架，前端vue的版本為vue2，因此前端集成UEditorPlus主要參照官方文檔中關于vue2的集成方式，主要分為一下幾部：

1.1.安裝插件

npm i --save vue-ueditor-wrap@2.x
# 或
yarn add --save vue-ueditor-wrap@2.x

 1.2.解壓 UEditorPlus 到靜態資源目錄

復制 dist-min 到項目 public/static/UEditorPlus/ 目錄。到官方倉庫去下載對應資源，將對應目錄中的資源拷貝到指定目錄下。此處應注意，應該是將dist-min目錄中的內容拷貝到public/static/UEditorPlus/ 下。本人在集成的時候后，將dist-min本級目錄一并放到該目錄下，導致運行的時候一致報資源找不到，浪費不少時間。如下圖：

1.3.插件配置

在main.js中掛載插件，方便全局引用，如下圖

頁面中引用組件并進行配置如下圖：

本人采用的配置方式并不是從后端接口讀取，而是直接在前端頁面配置，啟用前端配置需要設置

loadConfigFromServer=true。提供一份本人親測可用的前端配置：

editorConfig: {// 后端服務地址，后端處理參考// https://open-doc.modstart.com/ueditor-plus/backend.htmlserverUrl: process.env.VUE_APP_BASE_API + '/editor/upload',// ...serverHeaders: {'Authorization': 'Bearer ' + getToken()},loadConfigFromServer: false,UEDITOR_HOME_URL: '/static/UEditorPlus/',UEDITOR_CORS_URL: '/static/UEditorPlus/',autoHeightEnabled: false,initialFrameHeight: 500,//阻止div標簽自動轉換為p標簽allowDivTransToP: false,toolbars: [