在Web开发中，富文本编辑器是不可或缺的一个功能组件，掌握少量基础语法就能让一篇文章实现较为不错的排版效果，即见即所得。
目前市场上已提供大量集成富文本编辑器的包，Quill 作为其中一个，以简单、易上手特点，成为目前富文本编辑器常用选择之一。与其他富文本相比，Quill 提供了大量内置API接口，为用户根据自己需求对富文本编辑扩展性开发，例如用户交互，添加幻灯片、3D模型组件等。
本篇文章将介绍 Quill 的两种使用方式：
1，Quill 在纯 HTML 页面中的使用；
2，Quill 集成在 Vue 组件的使用；
一，Quill 在原生 HTML 页面中引入
Quill 在HTML 中使用较为简单，分为以下三部：
1，把相关库以及样式文件引入；
2，利用<script> 标签对编辑器初始化；
3，在标签页面中创建对应的DOM元素，与初始化的编辑器进行绑定即可；
整体代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入样式文件 --> <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet"> <!-- 引入Quill库文件 --> <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script> </head> <body> <!-- 创建一个编辑器容器 --> <div id="editor"> <p>Hello World!</p> <p>Some initial <strong>bold</strong> text</p> <p><br></p> </div> <!-- 初始化Quill编辑器 --> <script> var quill = new Quill('#editor', { theme: 'snow' }); </script> </body> </html>
效果：
Quill 的富文本编辑器默认使用的是 snow主题，如果感到单一或功能还没满足自己日常开发需求，可以借助借助 modules.toolbar自定义，如下：
var toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // 字体 ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // 样式标题 [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], // 下标、上标 [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进 [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], // 字体 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'] // 格式清除 ]; var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' });
更改后富文本工具栏效果如下：
二，Quill 在 Vue 中作为组件引入
Quill 在 VUE 中使用，目前较为常见的有两种方式：
2.1，借助 Vue-Quill-Editor
2.2 ，借助VueQuill(Vue的版本)
以上两种方式都是将 Quill 以组件方式集成在 Vue 中，本文将对第一种方式做简单介绍
- 首先需要安装对应包环境：
npm install vue-quill-editor --save # or yarn add vue-quill-editor
- 对
vue-quill-editor组件进行挂载引入，引入的话有两种方式：
1，用根组件全局挂载：
import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' // 引入样式 import 'quill/dist/quill.snow.css' // snow theme import 'quill/dist/quill.bubble.css' // bubble theme Vue.use(VueQuillEditor, /* { default global options } */)
2，在单组件中局部挂载：
import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }
quill-editor 引入后， 作为组件注册到项目中即可正常使用；
<template> <!-- Two-way Data-Binding --> <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" /> </template> <script> // You can also register Quill modules in the component import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '<h2>I am Example</h2>', editorOption: [ ['bold', 'italic', 'underline', 'strike'], // 字体 ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // 样式标题 // eslint-disable-next-line standard/object-curly-even-spacing [{ 'list': 'ordered'}, { 'list': 'bullet' }], // eslint-disable-next-line standard/object-curly-even-spacing [{ 'script': 'sub'}, { 'script': 'super' }], // 下标、上标 // eslint-disable-next-line standard/object-curly-even-spacing [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进 [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], // 字体 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'] // 格式清除 ] } }, methods: { onEditorBlur (quill) { console.log('editor blur!', quill) }, onEditorFocus (quill) { console.log('editor focus!', quill) }, onEditorReady (quill) { console.log('editor ready!', quill) } }, computed: { editor () { return this.$refs.myQuillEditor.quill } }, mounted () { console.log('this is current quill instance object', this.editor) } } </script>
效果如下：
需要注意的是，这里组件 quill-editor 中 绑定的 content 传入的是 String ，但在监听过程中变化的是封装了quill, html, text 三个属性的 Object ，这一点在传参时希望大家多注意一下，
<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />
组件可以通过 onEditorChange 函数来监听文本编辑器用户的输入内容
<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)" /> <script> onEditorChange({ quill, html, text }) { console.log('editor change!', quill, html, text) this.content = html } </script>
