文章的釋出功能中，我們希望像寫文檔一樣釋出一整篇帶标題、分段、加粗等效果的文章，而不是單純的一段文本，這時就需要用到富文本編輯器。富文本編輯器有很多版本，他們樣式不同，使用方法不同。
本篇這裡我們在npm下載下傳并使用vue相關的富文本編輯器：vue2-editor。
1.安裝vue2-editor
網址：
https://www.npmjs.com/package/vue2-editor
cd admin npm install vue2-editor 
安裝完成，開始使用：
2.在網站中找到vue2Editor的引入方式，進行引用并使用
進入ArticleSet.vue元件檔案：
複制上方标題輸入框，把input輸入框改為vue-editor元件：
此時，頁面已經出現富文本編輯器，大家自行測試：
3.修改接口和資料模型上傳富文本編輯器内容
富文本編輯器的原理就是将我們輸入的文本和樣式變成了HTML，在文本上加了HTML标簽：
是以模型中建立一個類型為string的内容content就可以完成上傳了。
測試：
沒問題。但是我們在檢查元素的時候會發現，部分效果的實作是使用了vue2-editor類包中的類名實作的，現在類包在admin端引入，以後在web端使用時我們也需要将vue2-editor引入，才能實作前台展現的效果。
4.富文本編輯器圖檔的引入
（1）自帶圖檔上傳的缺點
富文本編輯器當然是可以上傳圖檔的，但是上傳的圖檔是以base64編碼直接當作文本一起傳到背景接口的，現在我們還沒有修改接口，但是也可以測試一下。我還專門花了五分鐘重做了一個11k大小的小logo進行測試：
上傳成功後，從清單進入頁面，可以看到接口檔案上傳的大小。普通的接口上傳隻需要不到1k，但是本次帶圖上傳的大小達到了11k，也就是說圖檔的大小會影響接口上傳速度，如果我們上傳多張高達十幾兆大小的圖檔，很可能對接口傳值的負載過大，引起崩潰：
是以，我們要将圖檔的上傳修改一下。
（2）修改圖檔上傳方式
回到最初vue2-editor頁面，找到自定義上傳示例：
修改ArticleSet.vue:
将示例中的方法複制到我們的方法methods中，進行一下修改：
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// 引入包内自帶的formdata
const formData = new FormData();
// 将前端傳入formdata中資料名為file的資料追加到formdata,與上篇文章的圖檔上傳相同
formData.append("file", file);
// 使用我們上篇文章定義好的圖檔上傳接口,将formdata資料傳到背景,并接收傳回的資料到res
const res = await this.$http.post('upload', formData)
// 找到傳回資料中的圖檔連結
let url = res.data.url;
// 用vue-editor包自帶的插入方法:在光标所在位置,插入一張圖檔,圖檔的位址是url
Editor.insertEmbed(cursorLocation, "image", url);
// 重新整理(重置)編輯器
resetUploader();
}, 測試一下，如果沒問題，結果應該與上篇文章的圖檔上傳效果一樣，圖檔顯示後直接在uploads檔案夾找到圖檔。
接口調用成功，file沒問題，找到filename：bbcf3dafdce988e88987ae84d5e5c805，去uploads檔案夾找一下：
可以找到，沒問題。
再看一下編輯器内生成圖檔的代碼：
是我們背景的圖檔路由位址，沒問題。儲存測試：
再進去，沒問題，富文本編輯器的圖檔上傳也成功了。