koa2.0富文本編輯器的選擇歷程

本人學習vue和koa2.0，作了一個簡單的我的博客，博客天然會須要富文本編輯器的選擇，因爲nodejs和koa2.0，因而便開始了不斷嘗試的歷程。

1、ueditor

剛開始在百度搜索，天然第一個發現就是百度的ueditor，哇，功能好強大，雖然樣式抽了些，因而便興高采烈的學習百度的ueditor的使用，學者學者就發現一個事實，百度的uediotr不支持nodejs後臺，因而果斷放棄，從新開始了尋找歷程，很快發現了koa-ueditor

2、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路由，徹底能夠本身實現啊。

3、改造ueditor

　　1. 路由使用vue-router徹底ok，問題在於文件的解析和保存，解析後的結果須要是readStram才能存儲，通過一些測試選擇後，選擇了busboy中間件https://github.com/mscdex/busboy，改造後，上傳圖片ok，可是上傳單張圖片的右邊還有個圖片管理，在圖片管理中上傳一張或者多張圖片會報錯，猜想多是請求和請求處理不搭配吧，而後想用koa-multer替代，可是使用koa-multer沒法對config進行if判斷，最後放棄，放棄了多張圖片上傳的功能。

4、學習與反思

過程這麼艱辛，一小方面是由於koa2.0版本的問題，另外一大方面是本身對這方面的只是瞭解太少，不少東西都只是停留在使用層面，對應的理論原理只知其一;不知其二，之後要注意原理這方面的積累，所謂技術都是大同小異，具備類似點的。

 我的博客學習demo：https://github.com/My-Walker/my-blog

 

----------------------end