ueditor与node上传调试

316 阅读2分钟

比较郁闷的是为什么百度就这么放弃ueditor编辑器了,既没有维护也没有新的替代产品,人家fckeditor都进化到ckeditor5.0了。可见国内开源环境还真是挺恶劣的。

公司项目需求编辑器上传及粘贴上传,将老古董ueditor拿来折腾(最近一年左右都没有编辑器需求),搭建富文本编辑环境

我司为大前端环境,node做中端,java为后端,图片经由node端转发至后端。

问题一:全局变量 UEDITOR_HOME_URL

ueditor依赖这个变量来加载文件,该变量指向资源路径

window.UEDITOR_HOME_URL = '/js/ueditor/' 
//前后都需要使用  '/'

// 注意下面这几个配置变量与‘UEDITOR_HOME_URL’相关,位于ueditor目录的config.json中
// theme: 'default',
// themePath,
// langPath,
// iframeCssUrl,
// codeMirrorJsUrl,
// codeMirrorCssUrl

问题二:跨域问题

本地调试一般使用localhost+port的方式调试,这导致ueditor报跨域错误,具体原因为iframe资源调用导致。

方案一

因为我们是大前端环境,资源与node服务在同一组服务商,我们不跨域(当然是运维同学施的魔法,但开发环境上肯定是在一起的),通过nginx的反向代理,修改hosts文件,伪造一个假域名,如这种调用 http://www.xxx.com/js/ueditor/...,解决跨域问题,

方案二

找运维解决^_^,我在网上找了一圈,没找到,找到了也没看懂,有好建议的话给我留言

问题三:服务端api

不细述,各公司环境不一,流程也不同,根据自己的环境去完成,我们的接口如下

router.use('/uploader/ue', ...) 

// 配置ueditor/config.json
serverUrl: '/uploader/ue'

问题四:服务端接收数据

我们要实现两种图片上传需求
1)、直接使用上传功能上传
2)、客户从word,html复制粘贴图片上传

解决1):node端我们使用了比较老的async-busboy库,跟着npmjs.com/async-busboy的说明走完就好了

解决2):这里折腾了好久,文档不好找,参考官方php的demo文件知道粘贴上传,ueditor并不上传图片二进制流数据,而是字符串数据, GET部分?actiontype='catchimg', POST部分则是一个文件名的字符串数组,所以要分别接收GET/POST的数据在做接下来的处理

拿到POST的字符串数据后,通过npmjs.com/request库,参考request说明,取回需要的图片流再pipe到java端就完事了.request有很详细的流操作说明,逻辑比较多我也不贴代码上来了