JAVA集成富文本编辑器UEditor

集成前说明集成UEditor一.UEditor下载二.UEditor迁入项目三.引入ueditor中的js四.初始化UEditor五.实现图片上传

集成前说明

其实java独立集成ueditor是个伪命题,集成ueditor需要前后端共同参与才能完成,因为集成ueditor的时候,两端都有对应的配置,信息交互的接口及一些规则的定义。

集成大致的流程图:

集成UEditor

一.UEditor下载

百度搜索ueditor到官网进行下载,或者点击这个链接进入到下载页面/website/download.html,因为是java集成,所以选择Jsp版本.至于版本号,最新即可(当前最新1.4.3.3).

二.UEditor迁入项目

将下载后的UEditor压缩包解压,整体拷贝进前端代码某一处,因为压缩包中含有js,图标等多种内容,可以单独给定一个文件夹,与项目整体的js一个层级即可.当然了,这个位置是可以自己定义的,放哪里都行,但是一定要保证,项目中用到富文本的html也好,jsp也好,或者其他文件也好,能引入解压包中的js文件,不然后续将无法进行.

三.引入ueditor中的js

假如项目a.html文件是要集成富文本编辑器的文件,那么在这个文件中引入ue的js:

<!-- ueditor配置文件 --><script type="text/javascript" th:src="@{/ueditor/ueditor.config.js}"></script><!-- ueditor编辑器源码文件 --><script type="text/javascript" th:src="@{/ueditor/ueditor.all.js}"></script>

我这里用的是thymeleaf的形式引入的js文件,诸位看官可以根据自己项目的技术,对应着引入js文件即可.

引入后,在html代码相应位置(一般是form表单代码中).举例说明,你要做的是个新建的操作,表单里可能有标题,描述,和内容等字段,那么内容字段可能就是需要继承富文本编辑器的,那么你在对应的描述字段之后,书写这段代码即可:

<!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">这里写你的初始化内容</script>

其中的name属性你可以根据自己属性进行修改,以方便跟随所在form一起提交,同样,id属性也能按需修改,但是这里如果修改,千万注意初始化的时候,要用修改后的id.

这两段代码的加入,ueditor就已经引入进来了,但尚未初始化.

四.初始化UEditor

ueditor的初始化过程就涉及到了前后端的交互了,我们分两步来完成一个正常的ueditor的初始化.

首先,暂不考虑交互的初始化比较简单,如下代码实现:

<!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');</script>

这步完成后,你的项目中,就能看到ueditor编辑器了,只不过你的图片上传功能是不可用的,这是未能正常与后台交互,获取到ueditor服务端配置(也就是后端代码部分)导致的.

与我的示例图可能不同,此时,你的编辑器的图片上传的部分是不可用的,当然有些朋友可能也从控制台看出了端倪,有条请求是失败的,下图是这条请求,当然,我这里举例的是正常的请求,也就是实现了正常的初始化前后端交互的动作.

其实这条请求的目的,是获取服务端配置的一些选项,如,上传图片接口的action名字及参数名等.

那么接下来我们就着手实现正常的初始化前后端交互.

首先将解压包中的config.json文件存放到后端代码的resource文件夹下的某一处,这里的内容就是服务端的一些配置.config.json文件的位置jsp/config.json.

如果是非前后端分离的代码,可以复用之前拷贝到前端部分的ueditor中的config.json文件.

既然说这个config.json是服务端的配置,而刚刚初始化的时候,由前端发出的请求是获取这个配置,那么我们只要提供个这个接口用来完成初始化时的交互即可.

1.服务端动作-读取json文件,并直接返回结果,代码如下:

@RequestMapping("/config")@ResponseBodypublic JSONObject getUeditorConfigJson(){JSONObject config = null;try {//json文件位置String configJsonPath = "/static/ueditor/jsp/config.json";Resource resource = new ClassPathResource(configJsonPath);config = JSONObject.parseObject(IOUtils.toString(new FileInputStream(resource.getFile()), Charsets.UTF_8.toString()));} catch (Exception e) {e.printStackTrace();}return config;}

2.修改下初始化时那个前端发出的请求,请求的地址更换成我们现在的提供的接口,修改的地方为ueditor中的ueditor.config.js中的serverUrl的值,我这里修改如下:

ok,到这一步,ueditor的初始化算是正常初始化完成,可以通过初始化后的富文本编辑器的图片上传功能是否可用及控制台接口访问是否正常返回config.json中的配置来确认.

五.实现图片上传

编辑器初始化完成,但是还未实现图片上传,图片上传这个动作,我这边实现也是需要前后端都要进行处理的(如果利用起来ueditor的每次请求的action=xxx,可能要另讲).

1.服务端工作内容,先要有个图片上传的接口,并修改config.json中的imageFieldName值与我们上传图片参数名要一致.

java部分代码,实现上传:

/*** 上传图片* @param file* @return*/@RequestMapping("/image")public Result uploadImage(@RequestParam("file") MultipartFile file){Result result = uploadFileService.uploadImage(file);return result;}

config.json中的修改,使imageFieldName的值与上述参数名,也就是file保持一致:

至此,服务端(后端)搞定了.

2.前端上传图片地址,指定为我们自己那个接口.

官网提供了这个接口地址的修改,我这里是在初始化编辑器前,进行了上传图片的地址的修改.代码如下:

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {if (action == 'uploadimage' || action == 'uploadscrawl') {return '/upload/image';} else {return this._bkGetActionUrl.call(this, action);}}ue = UE.getEditor('container');

其中的/upload/image路径,可以根据你页面的需要进行添加前面的http+ip+端口号的部分,因为我这里是非前后端分离的代码,这样写已经满足了需求.

到此处,图片应该已经能上传,且能在控制台看到上传的接口正常返回了,但是,很大可能,你上传完的图片,并没有成功回显在编辑器中,没错,各位大神们应该已经猜到了,是ueditor没能正确解析出来上传完成后的图片路径导致的不能回显,那么,我这里还做了一步操作,修改ueditor.all.js中的上传图片完成后对返回值解析的部分.修改如下:

可以看到,注释掉的部分,是原js中的代码,修改后部分,是根据我自己上传图片接口的返回值结构,获取上传成功后的图片路径.

各位大神按自己接口返回结构修改即可,这样,图片也能回显在编辑器中了.

至此,ueditor已经集成,且实现了图片上传的功能,其他细节,诸如编辑器的菜单的取舍,初始化的一些配置等等,可以去翻翻官方文档来按需实现,如果你只需要实现集成,其他默认即可,那么这里的内容应该能满足开发需求了.

第一次公开发博客,希望能对正在阅读的你有所帮助,亦或是提示,当然,如果你发现了我的不足,也欢迎批评指正,谢谢各位!