vue-quill-editor 官方文档传送门

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

NPM

Js

npm install vue-quill-editor --save

# or
yarn add vue-quill-editor

Mount with global

Js

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 上。


最终实现效果如下：