koa2.0富文本编辑器的选择历程

本人学习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