UEditor是由百度web前端研发部开发所见即所得富文本web编辑器。可以定制很多如新闻页面,博客等等。UEditor使用简单,支持二次开发,适合快速开发很多业务功能,研究几天发个学习文档。
UEditor分为前端和后端前端主要是编辑器部分的渲染功能,后端主要是上传文件,图片等功能。
一,下载地址
-
官方文档地址:http://fex.baidu.com/ueditor/;
-
下载的源码里面是没有ueditor.all.js,需要使用node.js命令初始化出dist文件里面有所有需要引入到项目的静态资源文件。创建ueditor目录,目录如下:
-
ueditor.json为后台上传功能配置。ueditor.config.js为前端UI控制配置。lang包下有中英文js,其它文件为编辑器的前端UI配置,如需自定义样式可对应找到文件修改。
嫌麻烦不想搞node.js的可以看下载这个:https://pan.baidu.com/s/12LfTRLSMQ5jEHu64lDX5nA 提取码:wwp3
二,前端,后端使用
- pom.xml引用
-
<!-- ueditorConfig --> <dependency> <groupId>com.gitee.qdbp.thirdparty</groupId> <artifactId>ueditor</artifactId> <version>1.4.3.3</version> </dependency> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20200518</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency>
- 页面中引入 ueditor.config.js, ueditor.all.js, zh-cn.js 即可。详细的基础配置官方文档上都有写很简单,这里不再重复写了。
- ueditor.config.js的配置问题。
- config配置比较重要,配置文件注释是中文写的比较清楚,根据自己的业务需求配置对应的功能,这里着重说明下关于请求后台的配置。
-
打开ueditor.config.js文件(原来是没有server_url的 这是我自定义了一个项目访问路径,然后把服务器同一请求路径改成自己的服务器请求路径)这样做是为了访问后台加载后台配置文件config.json文件,config.json文件里面定义了编辑器的图片上传,文件上传,涂鸦上传和对应回显的一些配置。(当然config.json文件里面的路径也要改成自己服务器的路径。)
-
/** * ueditor统一入口 */ @Controller @RequestMapping("ueditor") public class UeditorController { @RequestMapping(value="/config") public String config(HttpServletRequest request, HttpServletResponse response) { return "redirect:/js/ueditor/config.json"; } }
ueditor.config.js请求的后台统一路径里面要写的代码(我是重定向到config.json文件了),这样前端富文本就能获取到config.json文件中的上传接口相关的配置。上传功能就可以使用了。
-
加载执行的流程大概是:页面渲染编辑器 --->(使用上传功能时)发送服务器同一请求接口获取config.json文件 ---> 读取配置文件 ---> 上传文件调用配置文件的接口;
-
我没有对配置文件修改太多东西,只是在调用上传接口的时候复写了上传接口返回的路径;
-
var ue = UE.getEditor('container',window.UEDITOR_CONFIG); // 重写文件上传路径 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadfile') { return '/ueditor/upload'; } else { return this._bkGetActionUrl.call(this, action); } }
*判断js中action的名称要和config.json里的action名称对应才可以对应返回自己想要的接口路径
-
这样我们就能上传图片到我们自定义的上传接口上了。
- 做到这一步基本上都已经完成了,如果上传功一张图片就会调用自己写的图片上传接口了。
三,小问题
- 关于图片回显上图中imageUrlPrefix是图片回显的前缀在回显到编辑器里的img标签地址上会自动加上该前缀,如果没有正确回显就看看img标签回显的地址是否和在自己服务器上的图片地址一致。
- layui中使用setContent() 给富文本赋值的时候会出现赋值不成功,加上setTimeout() 即可。
-
setTimeout(function () { ue.setContent('给富文本赋值的内容'); },500);
到这里基本都结束了,需要特别定制化的功能就靠自己探索了。