天天看点

Ueditor百度富文本编辑器

一、配置 1、maven配置:

Ueditor百度富文本编辑器
Ueditor百度富文本编辑器

注:注释掉的jar包配置是因为使用百度提供的源码时无法做到上传图片等功能,所以需要修改源码自己配置 2、web项目lib下载jar包: 3、前端配置文件 项目结构:

Ueditor百度富文本编辑器
Ueditor百度富文本编辑器
Ueditor百度富文本编辑器

将config.json文件放到resource下,ueditor的js文件放入js目录下,后端的java配置代码可随意放入 修改 ueditor.config.js文件的配置:

Ueditor百度富文本编辑器

此处路径换为项目中ueditor的css样式文件路径

Ueditor百度富文本编辑器
Ueditor百度富文本编辑器

此处url换为自己写的上传图片接口读取配置文件的路径,因为在上传图片时ueditor会先去读取上传图片的配置文件,此操作需自己定义路径代码读取config.json文件 4、源码修改 因为是springboot项目,在本地启动时tomcat加载的是一个war包,用源码中的方式是可以加载找到config.json文件的,但是当springboot项目打包在线上测试、生产环境时因springboot项目的包是jar包,此时无法在jar包中获取到resource下的config.json文件,只能通过流的形式将config.json文件读出。 BinaryUploader:

Ueditor百度富文本编辑器

此处将原有的fileStream注释掉,因原有的request在springboot项目无法获取到字节流对象,需要使用自定义的 ConfigManager:

Ueditor百度富文本编辑器

使用类加载器后的resource下的config.json的地址,遵循源码规则将此地址返回。

Ueditor百度富文本编辑器

将config.json文件以流的形式读出来,然后返回,至此源码修改完毕。 5、前端页面应用 引入js文件:

Ueditor百度富文本编辑器

根据当前页面富文本框做微调:

Ueditor百度富文本编辑器

注:此处的action实际的值是在config.json文件中定义的,可根据自己需要替换 在此处因只用到了上传图片,如果是上传图片将实际的上传地址返回给ueditor,注此上传图片的地址是自己写的controller接收图片地址

Ueditor百度富文本编辑器

因为在实际的开发中图片、视频等资源都有单独的资源服务器,资源服务器接收图片的接口等是公共接口,为了适应接口所以此controller是将前端接收的图片流经过处理转换为接口可处理的形式,然后在此controller中调用远程服务器上传图片。 注意:因ueditor上传图片只识别源码自定义好的返回值,所以在此controller需特定处理,将返回值设置为ueditor可识别的返回结果。

Ueditor百度富文本编辑器

此处调用远程服务器是通过springcloud的feignclient服务间调用,将file传给远程服务器接口。  

转载于:https://www.cnblogs.com/fatTmonkey/p/10641288.html