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;
}*/

修改后的效果如下：