Quill富文本編輯器，自定義上傳圖片時間，上傳七牛雲返回地址，插入編輯器？

---

自己解決了，並且是巧妙的解決了；很多朋友用的是vue-quill-editor，用vue封裝後的Quill；我覺得不好，一切還是原生的比較好，理解實現原理才是學習之道；

需求：Quill實現自定義圖片上傳介面 上傳七牛雲返回url

原因：它默認的圖片上傳是使用Data URL方式 存到資料庫會爆炸

Quill提供了自定義按鈕 也有回調API 兩種都需要自己寫一個form input提交；回調API更容易實現非同步請求；廢話不少說，帖code；

write.vue

import Quill from ./dist/quill.min


七牛雲實現單一文件上傳 需要在自己伺服器上獲取一下token 然後帶著token去請求直傳文件 - 七牛開發者中心就行了

我的服務端是PHP 介面引入sdk

前端代碼比較巧妙，這裡用了element的上傳組件(自己寫的form就不貼了)原理：利用回調函數主動觸發上傳動作，再利用success監聽返回數據 最後出發Quill的插入文檔API

API-Quill addHandler是監聽image事件的

最關鍵的一步，上傳成功的回調並插入編輯器

由於editor無法設置全局變數 只能複製給data了 所以 obj是editor

ok大工搞成 隨便上傳圖片

---

推薦閱讀：