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

<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

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.jsonueditor.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注解

<!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/

image.png

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

文件存储路径

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352