SpringBoot接入Ueditor编辑器

很多时候我们需要使用到富文本编辑器，这里我就分享一下SpringBoot接入百度的UEditor编辑器的方法；

下载UEditor编辑器

官网：https://ueditor.baidu.com/website/index.html
我们下载其中的 jsp utf-8版本

编写API接口

编辑器要从服务器处获取配置文件，并且在编辑器中加入图片，文件时，需要上传到服务器进行存储，所以我们要留出给ueditor使用的api；

@RestController
@RequestMapping("/api/ueditor")
public class UeditorController {/*** 获取Ueditor的配置文件* @return*/@GetMapping("/config")public String getConfig() {return "{\n" +"        \"imageActionName\": \"uploadimage\",\n" +"            \"imageFieldName\": \"file\",\n" +"            \"imageMaxSize\": 2048000,\n" +"            \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +"        \"imageCompressEnable\": true,\n" +"            \"imageCompressBorder\": 1600,\n" +"            \"imageInsertAlign\": \"none\",\n" +"            \"imageUrlPrefix\": \"\",\n" +"            \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +"\n" +"        /* 上传文件配置 */\n" +"        \"fileActionName\": \"uploadfile\",\n" +"            \"fileFieldName\": \"file\",\n" +"            \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +"            \"fileUrlPrefix\": \"\",\n" +"            \"fileMaxSize\": 51200000,\n" +"            \"fileAllowFiles\": [\n" +"        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +"                \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +"                \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +"                \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +"                \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"]\n" +"    }";}/*** Ueditor上传文件* 这里以上传图片为例，图片上传后，imgPath将存储图片的保存路径，返回到编辑器中做展示* @param file* @return*/@PostMapping("/upload")public String upload(@RequestParam("file") MultipartFile file) {String result = "";if(!file.isEmpty()) {String originalFileName = file.getOriginalFilename();// 这里写你的文件上传逻辑// String imgPath = fileUtil.uploadImg(file);String imgPath = "";result = "{\n" +"    \"state\": \"SUCCESS\",\n" +"    \"url\": \"" + imgPath + "\",\n" +"    \"title\": \"" + originalFileName + "\",\n" +"    \"original\": \"" + originalFileName + "\"\n" +"}";}return result;}}

配置UEditor编辑器

将下载的编辑器解压，放到项目的/resources/static/目录下

编辑其中的ueditor.config.js文件，我们可以通过这个文件对编辑器进行大量的配置
在这里，我们主要修改这个地方

将

, serverUrl: URL + "jsp/controller.jsp"

替换为我们自己写的api接口，让编辑器获取配置文件，如：

, serverUrl: "/api/ueditor/config"

在这个配置文件中，我们还可以进行许多其他的配置，比如设置编辑器的宽度，高度，是否自适应高度等，大家可以自己查看和尝试。

接入UEditor编辑器

在上面的步骤中，我们已经将编辑器配置完成了，现在只需要接入到我们的页面中就行了。示例如下：

<html><head><title>富文本编辑器</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><!-- 接入编辑器 --><div><script id="container" type="text/plain">这里写你的初始化内容</script></div><script src="/ueditor/ueditor.config.js" type="text/javascript"></script><script src="/ueditor/ueditor.all.js" type="text/javascript"></script><script type="text/javascript">var ueditor = UE.getEditor('container', {initialFrameWidth : 1190,       // 设置初始时的宽度initialFrameHeight: 500         // 设置初始时的高度});UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {// 如果触发了下面三个动作中，则进行文件上传操作if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {return '/api/ueditor/upload';} else {return this._bkGetActionUrl.call(this, action);}}</script></body>
</html>

至此，编辑器已经接入成功了！
效果如图

参考文档

UEditor官方文档
jsp使用说明
后端请求规范

SpringBoot接入Ueditor编辑器相关推荐

ueditor编辑器java使用_java/springboot整合UEditor编辑器
官网下载jsp版ueditor放进项目,其实放在哪个目录看项目习惯(有些按照网上的来就是路径问题导致),主要是获取配置的时候能找到相应的路径. 页面上引入相应js,加上也可script方式 uedit ...
很详细的SpringBoot整合UEditor教程
很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
SpringBoot集成UEditor实现文本编辑功能增删查改发布等功能
SpringBoot集成UEditor实现文本编辑功能简介创建实体 DAO层 Controller层业务实现页面弹出框设置页面布局设置 js页面设置设置只显示六条记录点击事件的查看功能 p ...
ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...
<百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...
在YII2框架中使用UEditor编辑器发布文章
在YII2框架中使用UEditor编辑器发布文章创建文章数据表文章数据表主要有4个字段 id 主键(int) title 标题(varchar) content 内容(text) created ...
ueditor集成实例php,Laravel框架集成UEditor编辑器的方法图文与实例详解
本文实例讲述了Laravel框架集成UEditor编辑器的方法.分享给大家供大家参考,具体如下: 一. 背景在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 ...
百度UEditor编辑器关闭抓取远程图片功能（默认开启）
2019独角兽企业重金招聘Python工程师标准>>> 这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白 ...
在ueditor编辑器的光标停留处插入内容
业务场景: 首先在ueditor编辑器中插入一段文本,然后我想在文本的某个位置(光标停留处)插入一个字符串,这个字符串是从页面的其他地方选择得来的. 注意,当我们点击ueditor编辑器以外的地方,编 ...
开发中使用UEditor编辑器的注意事项
最近在一个刚结束的一个项目中使用到了UEditor编辑器,下面总结一下遇到的问题以及使用时需要注意的地方: 1. 使用UEditor插件需要先对其进行路径配置: 在ueditor.config.js文 ...