這篇文章主要為大家展示了Vue如何使用富文本編輯器Vue-Quill-Editor，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、成都品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺(jué)設(shè)計(jì)專才。

使用教程(注意細(xì)看總結(jié)部分，寫(xiě)了幾點(diǎn)，希望有所幫助)：
1、安裝插件：npm install vue-quill-editor
2、安裝插件依賴：npm install quill
3、main.js文件中引入：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)
new Vue({
 VueQuillEditor,
 render: h => h(App),
}).$mount('#app')

4、vue頁(yè)面中使用(代碼完整，復(fù)制就能使用)：

總結(jié)：

1、變量toolbarOptions表示自定義的工具欄，可以參照官網(wǎng)(官網(wǎng)寫(xiě)的比較簡(jiǎn)單)或者細(xì)看本文代碼(有詳細(xì)注釋)；
2、如果不單獨(dú)處理圖片，圖片會(huì)被直接轉(zhuǎn)義成base64，跟隨DOM一塊兒上傳服務(wù)；
3、本文對(duì)圖片做了自定義處理，選擇本地圖片時(shí)，會(huì)單獨(dú)上傳到服務(wù)，返回地址后，直接插入到富文本編輯中的當(dāng)前節(jié)點(diǎn)。看代碼中editorOption的handlers的image函數(shù)，以及插入富文本編輯器當(dāng)前光標(biāo)函數(shù)beforeAvatarUpload，代碼中有詳細(xì)注釋；
4、粘貼板，變量clipboard。如果需要清理復(fù)制的自帶樣式，使用粘貼板進(jìn)行清理，函數(shù)HandleCustomMatcher；
5、對(duì)于復(fù)制粘貼的情況，多說(shuō)一句。過(guò)程中，編輯器已經(jīng)將原有的DOM轉(zhuǎn)為編輯器允許存在的DOM元素，所以這塊兒不用再處理(處理起來(lái)，也會(huì)有點(diǎn)復(fù)雜)。

以上就是關(guān)于Vue如何使用富文本編輯器Vue-Quill-Editor的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。