1.安裝

npm install vue-quill-editor --save

2.引入

import { quillEditor } from 'vue-quill-editor'
components: {
    quillEditor
},

3.使用

<quill-editor v-model="blogContext"   //編輯器內容欄位
              ref="myQuillEditor"
              style="background-color: white;"
              class="editer">
</quill-editor>

4.自定義toolbar

因為這個編輯器有一些功能感覺是用不上的，但是如果放著它對使用者來說實在不是那麼友好，所以就修改了一下原始碼。我們找到node_modules/vue-quill-editor/src/editor.vue檔案，開啟這個檔案我們會看到一個toolbar屬性，大致是這樣的：

他們對應的功能的分別是這樣的

背景顏色 - background 加粗- bold 顏色 - color 字型 - font 內聯程式碼 - code 斜體 - italic 連結 - link 大小 - size 刪除線 - strike 上標/下標 - script 下劃線 - underline 引用- blockquote 標題 - header 縮排 - indent 列表 - list 文字對齊 - align 文字方向 - direction 程式碼塊 - code-block 公式 - formula 圖片 - image 視訊 - video 清除字型樣式- clean

大家可以根據自己的需要刪除不必要的toolbar。

5.修改檔案上傳方法

因為預設此編輯器上傳的圖片是以base64儲存的，如果圖片多了我們把這個儲存到資料庫可能就會有各種各樣的問題，所以我們需要改一下此圖片上傳方式。

1. 首先，我們先放一個Element的上傳元件，把它隱藏起來
2. 我們在給編輯器增加一個攔截器，攔截toolbar為image的元件

this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler);

3.當用戶單擊編輯器的檔案上傳按鈕時會呼叫imgHandler方法，我們在這個方法裡面呼叫第一步隱藏的Element上傳元件。

4.緊接著我們把使用的Element上傳元件上傳完成的圖片地址拼接到blogContext屬性上就ok了。