程序员社区

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/

SpringBoot集成百度UEditor插图
image.png

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

SpringBoot集成百度UEditor插图1
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

<dependency>
    <groupId>com.dcssn</groupId>
    <artifactId>ueditor-spring-boot-starter</artifactId>
    <version>0.0.1</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

下载UEditor源码

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

SpringBoot集成百度UEditor插图2
image.png

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

SpringBoot集成百度UEditor插图3
image.png

这里说下jsp目录

SpringBoot集成百度UEditor插图4
image.png

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

重点说明

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

SpringBoot集成百度UEditor插图5
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注解

<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="UTF-8"/>
    <title>ueditor</title>
    <style>
        #editor {
            width: 1024px;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="editor" type="text/plain"></div>
<script th:src="@{/ueditor/ueditor.config.js}"></script>
<script th:src="@{/ueditor/ueditor.all.min.js}"></script>
<script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script>
    UE.getEditor('editor');
</script>
</body>
</html>

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

测试启动

访问http://localhost:8080/

SpringBoot集成百度UEditor插图6
image.png

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

文件存储路径

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

赞(0) 打赏
未经允许不得转载:IDEA激活码 » SpringBoot集成百度UEditor

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区