RuoYi前后端分离框架集成UEditorPlus富文本编辑器

一、背景

采用若依框架搭建了一个小型的电子书项目，项目前端、后端、移动端就一人，电子书的章节内容是以富文本内容进行呈现的，产品设计人员直接给了一个第三方收费的富文本编辑器截图放到开发文档中，提了一沓需求点，概况下来就是要做成下图中的样子。作为一个后端开发人员为了尽量满足产品对富文本编辑器上丰富的功能按钮的执念，对着搜索引擎与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.html
	serverUrl: 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: [