這篇文章將為大家詳細(xì)講解有關(guān)如何在vue中使用vue-quill-edit富文本編輯器組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站制作、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運(yùn)營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價(jià)值。

一、安裝  cnpm install vue-quill-editor

二、引入

在main.js引入并注冊(cè)：

import VueQuillEditor from 'vue-quill-editor'
// require styles 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

三、封裝組件

 
 


 .quill_box{
 .ql-toolbar.ql-snow{border-color:#dcdfe6;}
 .ql-container{height:200px !important;border-color:#dcdfe6;}
 .ql-snow .ql-picker-label::before {
 position: relative;
 top: -10px;
 }
 .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}
 }

四、引入使用

components:{
 myEditor:myEditorComponent
 },

關(guān)于如何在vue中使用vue-quill-edit富文本編輯器組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前名稱：如何在vue中使用vue-quill-edit富文本編輯器組件-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/icdoe.html