富文本编辑器组件的使用

安装方法一

1.运行vue ui命令进入vue项目的可视化面板
2.点击依赖按钮——安装依赖——运行依赖——输入== vue-quill-editor==选择并安装

安装方法二

在Vscode新建终端，输入== npm install vue-quill-editor --save == 回车安装完成

使用富文本编辑器组件

1.在mian.js文件中导入富文本编辑器

import VueQuillEditor from 'vue-quill-editor' // 导入富文本编辑

2.导入富文本编辑器对应的样式

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

3.将富文本编辑器，注册为全局组件

Vue.use(VueQuillEditor)

4.在xxx.vue组件中使用富文本编辑器

// v-model实现数据的双向绑定
<quill-editor v-model="XXX"></quill-editor>

最终效果呈现

可参考官方文档：https://github.com/surmon-china/vue-quill-editor#vue-quill-editor