springboot集成ueditor百度富文本编辑器及上传图片到oss服务器

2024-04-11 00:41:42

1、下载ueditor编辑器

2、把下载的ueditor的文件springboot静态资源配置在resources下面

3、引入ueditor的js文件，及实例化

做完以上3点，就可以展示出来编辑器了

4、上传图片到oss服务器

1、先引入jsp/lib下的所有jar包，如果项目中已有的就不必重复添加了。

下面是UEditor依赖的jar包，可以直接使用（1.4.3.3版本）

<!--UEditor依赖的jar包 -->
<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version>
</dependency>
<dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.9</version>
</dependency>
<dependency><groupId>com.blingblingbang</groupId><artifactId>ueditor</artifactId><version>1.1.2</version>
</dependency>
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version>
</dependency>

2、如果项目中你用的html页面 ueditor/jsp/controller.jsp这个文件报红，在加载ueditor/ueditor.config.js 时调用

服务器统一请求接口路径 serverUrl: URL + "jsp/controller.jsp" 可能会导致

后台配置项返回格式出错，上传功能将不能正常使用！这个错误。

3、所以我自己写了一个接口，让他重定向到 /ueditor/jsp/config.json 这个文件。

把 ueditor/ueditor.config.js 中的服务器统一请求接口路径更换为自己写的重定向接口（这个思路是来自于 https://blog.csdn.net/pengdandezhi/article/details/81253904 大家可以看一下）

4、上传到oss服务器

做一个判断，当他上传图片时让他直接访问自己写的上传接口如下图：

后台接口（这个是上传oss服务器的接口，你们换成自己的就好）

注意的是，返回一定要是一个json格式，里面包含state 和 url

执行完以上步骤，你的ueditor就可以上传成功了。

最后回显的时候注意一下 ueditor/ueditor.config.js 的图片访问路径前缀设置为"" 就行。

注意：上传的时候 ueditor/ueditor.config.js 里的提交图片的表单名称一定要和后台接口

@RequestParam(value = "upfile", required = false) MultipartFile upfile   名字要一致，不然会获取不到数据。

还有一种方法，不过需要修改源码（修改img.js文件把源码的上传接口换成自己后台的上传接口就好，这里就不展示了）。

springboot集成ueditor百度富文本编辑器及上传图片到oss服务器相关推荐

UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例已解决上传图片问题. 2.内附完整d ...
ueditor百度富文本编辑器隐藏一下不需要的工具按钮
在ueditor.config.js中搜索"toolbars: " 以下为编辑器工具栏展示的按钮将不需要的按钮删掉就好.也可以在创建富文本编辑器的时候实例出需要的按钮不了解中文 ...
UEditor 百度富文本编辑器源码百度云下载
官网下载地址:官网下载地址: 因为官网的速度时快时慢的,所以我把源码包放到了百度云,可以开通百度云进行下载. 下载地址: 链接:https://pan.baidu.com/s/1aXMA77uQolM ...
ueditor百度富文本编辑器linux下报错: class path resource [config.json] cannot be resolved to absolute file path
https://www.cnblogs.com/findtasy/p/10043273.html
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
.net5项目集成百度富文本编辑器umeditor最全教程（含源码）
目前百度的umeditor已经停止维护了,net版本的分支源码包也停留在了net farmework4左右的版本,对于想要集成这款富文本编辑器到net5平台,具有较大难度,主要体现在以下几个方面: u ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...

最新文章

热门文章