这段时间公司,开发项目需要用到一款,富文本编辑器,经过多重选择终于找到了UEditor,但是发现也是一个坑,尽然要使用php/asp/.net/jsp作为后台配置,和上传处理,没办法我们的项目,我们的项目就是一个纯粹的Java后面,跟什么jsp的一点边都不搭,当然不会,为了这个富文本编辑器,去专门搞什么jsp.
但是没有办法,老大看上了它查看源码的功能,其他的富文本编辑器,要么是没有查看源码的功能,要么就是对浏览器的兼容性,太差了。于是动了改造UEditor的想法。
现在进入正题:
首先我们上官网http://ueditor.baidu.com/website/umeditor.html可以看到它是案例,是带有上传功能的,但是我们自己的项目,从官网照搬下来的,使用时会发现,提示由于路径配置不对,无法实现上传功能。
在调试模式下,查看官网上传案例,发现上传的时候,是通过jsp来处理的,同时返回一个json字符串,于是我们尝试在后台写一个接口来替代这个jsp来处理,上传数据和返回json字符串。
于是研究他的jsp和他的请求,发现一开始,初始化的时候,就会请求一次这个jsp,此时根据请求参数返回的返回一个json相应的字符串,作为上传的配置的文件,这个json字符,就是我们在官网下载文件中的config.json的相关内容,如此便简单了。
我们写两个接口,一个是发送配置文件(config.json),一个是处理图片,根据官网返回json字符串样式,拼接我们的返回格式就好了。
上传图片返回的格式:({"originalName":"demo.jpg","name":"demo.jpg","url":"upload\/demo.jpg","size":"99697","type":".jpg","state":"SUCCESS"})。
配置上传图片的格式:
{ "imageActionName": "uploadimage" "imageFieldName": "file", "imageMaxSize": "2048000", "imageAllowFiles": ".png", ".jpg", ".jpeg", ".gif", ".bmp" ],
"imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "/files", "imagePathFormat": "/upload"}
由于我只用了,上传单个图片的功能,所有配置文件json 字符串只选择了部分,要想跟多的上传功能,加json内容就行,同时也要增加对应的上传处理接口
最后在ueditor.config.js 文件中将serverUrl指向我们的后台接口,会发现所有跟后台有关的接口都是根据这个serverUrl来调用接口的只是,获取配置文件是get方式,后面根据?action=XX 上传文件是post方式后面也是加?action=XX,对此我们就我们的接口访问路径和访问方式做相应改动就行了。
最后就可以实现我们的上传了