轻量级富文本编辑器：Vue-Quill-Editor的简单使用

Vue-Quill-Editor

你好！ 如果你想了解Vue项目中如何使用 Vue-Quill-Editor ，可以阅读这篇文章，了解一下Vue-Quill-Editor的基本入门知识。

项目中安装Vue-Quill-Editor

Vue-Quill-Editor使用前，這里对列出几点安装和配置，帮助你顺利使用：

1. 下载Vue-Quill-Editor
   npm install vue-quill-editor --save
   安装不局限npm，yarn 和pnpm更好；
2. 下载quill（Vue-Quill-Editor需要依赖）
   npm install quill --save；
3. 项目中引入

	import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
	import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
	//import 'quill/dist/quill.core.css'
	//import 'quill/dist/quill.bubble.css'
	import * as Quill from 'quill'; // 富文本基于quill

4. template部分中使用 ；

	<quill-editor
	    v-model="content"
	    ref="myQuillEditor"
	    :options="editorOption"
	    @focus="onEditorFocus($event)"
	    @blur="onEditorBlur($event)"
	    @change="onEditorChange($event)">
	</quill-editor>

5.导入的Vue-Quill-Editor放到组件中

6.扩展 toolbar 功能，你可以自定义toolbar内的工具栏只需要导入对应的模块

import 'quill-emoji/dist/quill-emoji.css'
import * as Emoji from 'quill-emoji'
Quill.register('modules/emoji', Emoji)

7.配置项:这里editorOption即为toolbar配置项 可以在data里面配置
8. 这里是 Quill官方中文文档 (https://www.kancloud.cn/liuwave/quill/1409365)。
9. 这里是 vue-quill-editor使用文档 ( https://github.com/surmon-china/vue-quill-editor)。