重读vue电商网站42之添加富文本编辑器

通过 vue-ui 界面，可以安装我们所需要的依赖，或者使用下文 npm 或 yarn安装。

NPM
Js
npm install vue-quill-editor --save
 # or
 yarn add vue-quill-editor
 Mount with globalJs
import Vue from 'vue'
 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, /* { default global options } */)
 打开 main.js 入口文件，进行全局导入和注册：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/* { default global options } */)

使用

通过 quill-editor 标签，然后通过 v-model 双向绑定到 form表单的商品详情描述变量 goods_introduce 上。

最终实现效果如下：