1. 程式人生 > >koa2.0富文字編輯器的選擇歷程

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

本人學習vue和koa2.0,做了一個簡單的個人部落格,部落格自然會需要富文字編輯器的選擇,由於nodejs和koa2.0,於是便開始了不斷嘗試的歷程。

一、ueditor

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

二、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版本的問題,另一大方面是自己對這方面的只是瞭解太少,很多東西都只是停留在使用層面,對應的理論原理一知半解,以後要注意原理這方面的積累,所謂技術都是大同小異,具有相似點的。

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

相關推薦

koa2.0文字編輯選擇歷程

本人學習vue和koa2.0,做了一個簡單的個人部落格,部落格自然會需要富文字編輯器的選擇,由於nodejs和koa2.0,於是便開始了不斷嘗試的歷程。 一、ueditor 剛開始在百度搜索,自然第一個發現就是百度的ueditor,哇,功能好強大,雖然樣式抽了些,於是便興高采烈的學習百度的ueditor的

vue2.0 實現文字編輯功能

前端富文字編譯器使用總結: UEditor:百度前端的開源專案,功能強大,基於 jQuery,但已經沒有再維護,而且限定了後端程式碼,修改起來比較費勁 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能強大,程

vue2.0專案使用wangEditor文字編輯

首先 npm install wangeditor  然後,直接寫就行,也無需引入css樣式  <template> <div class="detailPage"> <div id="editor">

vue2.0專案中使用百度Ueditor文字編輯

1.首先下載靜態檔案 https://ueditor.baidu.com/website/download.html 2.然後,進行配置 首先把官網下載的Ueditor資源,放入靜態資源src/static中。 修改ueditor.config.js中的window.UEDITO

淘淘商城第二天—完成商品新增功能 商品類目選擇 圖片上傳 圖片伺服器搭建 kindEditor文字編輯的使用 商品新增功能

1、實現商品類目選擇功能 1.1需求 在商品新增頁面,點選“選擇類目”顯示商品類目列表: 請求初始化樹形控制元件的url:/item/cat/list 1.2 EasyUI tree資料結構 資料結構中必須包含: Id:節點id Text:節

vue2.0專案中使用Ueditor文字編輯示例

1.放入靜態資源並配置 首先把官網下載的Ueditor資源,放入靜態資源src/static中。 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下圖: 2.引入 在main.js中引入 import '../sta

react 0.14中使用百度文字編輯

2017年12月01日 15:59:33 lz101281 閱讀數:1293 標籤: ie 8 語言

NKeditor v5.0.2 釋出,線上文字編輯

NKeditor 5.0.2 已釋出。NKedtior 是基於 kindeditor 進行二次開發的專案,kindeditor 是一款優秀的開源線上編輯器。輕量級且功能強大,程式碼量卻不到百度的 ueditor 編輯器的一半。我們在 kindeditor 的基礎上做了很多優化,包括優化了部分樣式,以及刪除和

MVC3.0下使用百度文字編輯ueditor1.3.6上傳圖片

本文方法有不妥之處,希望有弄明白的大蝦指點指點 1:在Web應用程式中,檔案目錄結構 其中ueditor是富文字編輯器資料夾,upload資料夾則用來存放將要上傳的圖片檔案 2:在html頁面引入相應檔案,並初始化富文字編輯器 初始化富文字編輯器,可以用<scr

day70_淘淘商城專案_03_商品類目選擇 + 圖片上傳 + 圖片伺服器FastDFS + 文字編輯KindEditor + 新增商品_匠心筆記

淘淘商城專案_03 1、商品類目選擇 1.1、功能分析 1.1.1、資料庫表結構設計 1.1.2、前端頁面分析 1.2、服務層工程開發 1.2.1、Dao

web文字編輯選擇のxheditor

1.FCKeditor 他怎麼樣,我就不用多說了,網上多的很,不過有近300K的體積~~~ 2.xheditor 這個控制元件好象用的人比較少,不過看起來感覺不錯!JS+CSS+圖片一共有50K,小啊,中文! 3.tinyMCE 網上的評價很高,值得一試,不過比較大,近200K了,中文! 4.xinha

summernote文字編輯實現圖片新增上傳和刪除圖片

summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

百度文字編輯ueditor的使用、非空校驗、引用預定義模板

最近用到百度ueditor編輯器,遇到了很多問題,總結一下ueditor的使用、非空校驗、引用預先寫好的模板。 一、百度ueditor編輯器簡單使用: 1.在百度官網http://ueditor.baidu.com/website/download.html下載壓縮包,解壓之後整體拷

vue文字編輯Tinymce,功能齊全,對圖片等媒體資源操控性好,非常推薦!

使用步驟: 1.在index.html中引入js檔案: <body> <script src="./static/tinymce4.7.5/tinymce.min.js"></script> <div id="app"></div

bbs專案文字編輯實現上傳檔案到media目錄

media目錄是在project的settings中設定的,static目錄是django自己使用的靜態檔案的上傳目錄,media目錄是使用者自定義上傳檔案的目錄 # Django使用者上傳的檔案都放在media目錄下 MEDIA_URL = "/media/" MEDIA_ROOT = os.pat

bbs專案引入文字編輯和處理xss攻擊和文章預覽

一、富文字編輯上傳文章和圖片   富文字編輯器我們使用kindeditor,我們首先去官網下載,然後解壓,放到我們的static的目錄中     然後我們在html中這樣使用富文字編輯器 <!DOCTYPE html> <html lang

wangEditor文字編輯使用及圖片上傳

<script type="text/javascript" src="style/js/wangEditor.min.js"></script> <div id="editor"> </div> 建立富文字編輯器 var E = wi

文字編輯KindEditor的使用

       富文字編輯器KindEditor,是一種可內嵌於瀏覽器,所見即所得的文字編輯器。它是一種解決可一般的使用者不同html等網頁標記但是需要在網頁上設定字型的顏色、大小、樣式等資訊問題一個文字編輯器 第一步 引入三個檔案(一個css,兩個js) &nbs

在網頁中使用文字編輯editor+vue

先下載一個富文字編輯器(官網地址) 在vue中新建一個editor.vue <template> <div> <script id="editor" type="text/plain"></script> </div

KingEditor文字編輯的使用

1、KingEditor相關js、css檔案資源位置: 連結:https://pan.baidu.com/s/123RDPWdb7Aim5854kQmelg 提取碼:p64n 2、使用步驟: a).在頁面引入相關資源 <link rel="stylesheet"