本人学习vue和koa2.0,做了一个简单的个人博客,博客自然会需要富文本编辑器的选择,由于nodejs和koa2.0,于是便开始了不断尝试的历程。
一、ueditor
刚开始在百度搜索,自然第一个发现就是百度的ueditor,哇,功能好强大,虽然样式抽了些,于是便兴高采烈的学习百度的ueditor的使用,学者学者就发现一个事实,百度的uediotr不支持nodejs后台,于是果断放弃,重新开始了寻找历程,很快发现了koa-ueditor
二、koa-ueditor
地址在这里:https://github.com/weivea/koa-ueditor
1. 上传图片按钮为灰色
koa-ueditor是以百度的ueditor为基础,使其部分功能可以支持nodejs,而且是koa,于是按照其说明,做起了代码搬运工,一系列部署后,编辑器正常显示出来了,咦。。。,上传图片按钮是灰的,无法上传图片。。。,控制台一看发现一直报错,刚开始以为是自己的用法不对,于是各种尝试,寻找室友帮助,结果还是大败而归,当时完全按照该例子的用法写的啊,可就是上传图片功能不好使=。=
后来冷静下来后,开始研究在node_modules中的koa-ueditor模块,发现其中只有一个index.js,然后便是在百度ueditor中的文件夹中多了个nodejs文件夹,里面是一个配置文件,大概看了一眼index.js代码后,知道了其主要是起路由和上传文件的作用,如果请求(GET)的参数中的action是config的话,便重定向,返回nodejs文件夹下的配置文件,然后我在其中打印调试,发现该代码并没有执行,于是得出结论,是该路由不好使,最后得到一个猜测,那就是该中间件使用的是koa1.0的generator函数,而我使用的是koa2.0,而koa2.0是用的async/await,于是把那个index.js文件函数改变为koa2.0的async和await后,如果好使了,上传图片按钮不是灰的了,哈哈,终于搞好了,我真是聪明。
2. 上传图片按钮彩色,但是上传不上去
在尝试上传图片时,发现还是上传不上去,只不过错误变成了请求失败。。。,于是觉得可能还是koa版本问题,于是开始研究图片上传代码,发现其中使用了co-busboy对multipart/form-data格式文件解析,然后使用fs的流操作对文件存储,然后返回浏览器对应的url,最后对co-busboy一系列调试打印,发现奈何不了他,于是尝试更换其他工具来对文件解析,还真发现了一个await-busboy,然而还是并不好使,一天的各种尝试后,放弃了,最终决定放弃使用koa-ueditor,尝试使用小伙伴使用的vue-quill-editor,代码搬运后,发现没什么问题,而且界面好看,但是最后发现上传的图片时base64的,。。。,需要将base64自己进行处理,但是对这方面真是不太熟悉,于是有转向了之前的koa-ueditor,但是不再使用该中间件,因为该中间件其实就是在另一个php版本的uediotr上增加了一个nodejs路由,完全可以自己实现啊。
三、改造ueditor
1. 路由使用vue-router完全ok,问题在于文件的解析和保存,解析后的结果需要是readStram才能存储,经过一些测试选择后,选择了busboy中间件https://github.com/mscdex/busboy,改造后,上传图片ok,但是上传单张图片的右边还有个图片管理,在图片管理中上传一张或者多张图片会报错,猜测可能是请求和请求处理不搭配吧,然后想用koa-multer替代,但是使用koa-multer无法对config进行if判断,最后放弃,放弃了多张图片上传的功能。
四、学习与反思
过程这么艰辛,一小方面是因为koa2.0版本的问题,另一大方面是自己对这方面的只是了解太少,很多东西都只是停留在使用层面,对应的理论原理一知半解,以后要注意原理这方面的积累,所谓技术都是大同小异,具有相似点的。
个人博客学习demo:https://github.com/My-Walker/my-blog
----------------------end