springboot配置百度UEditor 富文本详解

Posted by wotrd on 07-16,2019

富文本简介

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

准备工作

ueditor需要单独文件服务器,可以使用七牛云,自己搭建文件服务器,也可以自己启动一个Tomcat作为文件服务器。

富文本使用方式 (1)去官网下载富文本代码:   有开发版和mini版,建议下载开发版,便于查找问题。上线时使用mini版提升速度。 config.json文件为ueditor的配置。ueditor.config.js加载config.json配置.先去后台getConfig方法获取配置在渲染。 (2)创建springboot项目springboot-ueditor(已上传到github https://github.com/wotrd/springboot-ueditor)开箱即用 (3)将config.json复制到resource/static目录下,在static下创建index.html文件。创建UeditorController.java文件。项目最终目录结构如下: s_u_1 (4)在UeditorController.java文件下添加两个方法,getConfig和upload。一个用来加载富文本的配置,一个用于富文本上传文件。 s_u_2 s_u_3 第二个方法使用HttpServletResponse返回是为了可以支持上传多张图片。 (4)编辑config.json s_u_4 如下图:重点是 imageUrlPrefix 这个配置,这是配置富文本显示上传文件的前缀,后缀上传完自动拼接。上传图片其他的类似 (5)编辑 ueditor.config.js s_u_5 圈起来的这个地址必须配,是用来请求getConfig这个方法获取配置的。

(6)编辑 index.html s_u_6 s_u_7 (6)编辑 application.properties文件 s_u_8 因为,我8080端口用于文件服务器,所以这里使用80端口。配置springboot2.x上传文件大小限制。还有上传文件路径。完成启动。

未完待续,有问题请留言!