最近在开发项目中用到了富文本编辑器，在使用的过程中感觉还可以，就想写篇分享给以后可能需要的朋，如果有错欢迎大家指出！
vue-quill-editor 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用，非常高效简洁。
基础用法
1、npm 导入 vue-quill-editor
npm install vue-quill-editor --save
2、引入 vue-quill-editor
在全局中引入
import Vue from vueimport VueQuillEditor from vue-quill-editor// 引入样式import quill/dist/quill.core.cssimport quill/dist/quill.snow.cssimport quill/dist/quill.bubble.cssVue.use(VueQuillEditor, /* { 默认全局 } */)
在指定的 vue 文件中引入
// 引入样式import quill/dist/quill.core.cssimport quill/dist/quill.snow.cssimport quill/dist/quill.bubble.cssimport { quillEditor } from vue-quill-editorexport default {components: {quillEditor}}
3、在 vue 中使用
<template><quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor></template><script>export default {data() {return {content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据editorOption: {}, //编辑器配置项}},methods: {onEditorBlur() {}, // 失去焦点触发事件onEditorFocus() {}, // 获得焦点触发事件onEditorChange() {}, // 内容改变触发事件}}</script>
到这里一个默认的富文本编辑器已经导入使用了，如下图所视！
升级用法
一般的，我们在使用的时候并不需要这么多功能，可以适当的对编辑器配置项进行配置。
editorOption: {modules:{toolbar: [[old, italic, underline, strike], //加粗，斜体，下划线，删除线[lockquote, code-block], //引用，代码块[{header: 1}, {header: 2}], // 标题，键值对的形式；1、2表示字体大小[{list: ordered}, {list: ullet}], //列表[{script: sub}, {scrip
