Vue項目中使用Vue-Quill-Editor富文本編輯器插件

背景

在項目中添加一個富文本編輯器，供用戶添加對商品的描述

步驟

1. 安裝Vue-Quill-Editor依賴

npm install vue-quill-editor --save

2. 客戶端在main.js注冊vue-quill-editor，引入相關的js和樣式

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

// 使用插件
Vue.use(VueQuillEditor)

3. 在組件中使用

<quill-editor v-model="goods_introduce"></quill-editor>

效果

注意

如果想要修改編輯器的高度，則需要在項目的全局樣式表設置如下的內容

方式1：
.ql-container{
	height:300px !important;
}

方式2：
/*.ql-editor{
    min-height: 300px;
}*/

修改后的效果如下：