SpringBoot集成百度UEditor

UEditor简介

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码
官网：https://ueditor.baidu.com/

UEditor分类

UEeditor(官网上的开发版)
Github地址：https://github.com/fex-team/ueditor
官方文档地址：http://fex.baidu.com/ueditor/

image.png

另一个是UMeditor(mini版)
Github地址：https://github.com/fex-team/umeditor

image.png

UMeditor，简称UM，是ueditor的简版。是为满足广大门户网站对于简单发帖框和回复框的需求，专门定制的在线富文本编辑器。

UEditor/UMeditor主要特点

1.轻量: 主文件的代码量为139k。
2.加载速度更快: 放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。
3.可定制: 配置项完善，可定制程度高。
4.可扩展: 代码层次拆分清晰，功能以插件形式挂接，可灵活定制需要的功能。
5.多后台支持: 支持php、asp、jsp、.net四种后台部署代码
6.功能丰富: 支持插入公式、粘贴QQ截屏、拖放上传图片、插入地图、草稿箱功能

与SpringBoot进行集成

由于整合的是前端框架，所以ueditor官方并没有jar包传到maven仓库
引入ueditor包的源码地址：
https://github.com/weiangongsi/ueditor-spring-boot-starter

    com.dcssn
    ueditor-spring-boot-starter
    0.0.1


    org.springframework.boot
    spring-boot-starter-thymeleaf


    org.springframework.boot
    spring-boot-starter-web

下载UEditor源码

UEditor/UMeditor源码下载地址https://ueditor.baidu.com/website/download.html

image.png

Java下载JSP版本的就可以了，下载解压后你会发现有html,css,js,图片等静态资源，直接在static静态资源目录下创建个ueditor目录，然后把解压出来的静态资源都放进去就可以了

image.png

这里说下jsp目录

image.png

jsp里面包含了Java集成ueditor会用到的一些Jar包还有一个JSP页面，这里用thymeleaf模板代替就不需要JSP了，由于引入了第三方ueditor依赖。所以可以把lib文件夹和jsp页面都删掉

重点说明

要重点注意config.json和ueditor.config.js两个文件
config.json
图片访问路径前缀imageUrlPrefix、视频访问路径前缀videoUrlPrefix、文件访问路径前缀fileUrlPrefix不要赋值，会影响回显，其余参数可以按照百度文档修改
ueditor.config.js
将serverUrl 改为yml配置文件中ue.server-url 的值

image.png

yml配置文件如下

spring:
  servlet:
    multipart:
      max-file-size: 100MB
ue:
  config-file: static/ueditor/jsp/config.json 
  server-url: /ueditor.do 
  url-prefix: /file

ue.url-prefix= /file用于回显图片，不设置的话后显示不出上传的图片
Spring上传文件默认最大1MB，上传文件大小会先被Spring限制，config.json文件大小限制要小于Spring的设置，可以将Spring的限制设大点

编写controller和thymeleaf页面

@GetMapping("/")
    public String index() {
        return "ue";
    }

主要用来页面跳转，别忘了在类上加个@Controller注解

UE.getEditor('editor')在ueditor.all.js中，用于得到UEditor编辑器实例

测试启动

访问http://localhost:8080/

image.png

成功看到UEditor编辑器界面说明集成成功

文件存储路径

每次上传文件，图片，或者视频，都会在项目对应的磁盘下生成ueditor文件夹
存储格式路径其实在config.json中都可以设置的，在config.json中搜索PathFormat关键字就可以找到各种文件的路径设置
Window
比如说你的项目在D盘，有上传文件的话就会在D盘自动生成ueditor文件夹用于本地存储
Linux服务器
ueditor文件夹就会在根路径生成