一、vue-quill-editor

1、vue-quill-editor 概述

1. vue-quill-editor 是一个基于 Quill 富文本编辑器的 Vue 组件

2. vue-quill-editor 在 Vue 2 项目中可以很方便地集成与使用

2、vue-quill-editor 安装

• 执行如下指令，安装 vue-quill-editor

npm install vue-quill-editor --save

---

二、vue-quill-editor 基础案例

1、案例演示

<template><div><quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor><button @click="submitContent">提交内容</button></div>
</template><script>import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";export default {components: {quillEditor,},data() {return {content: "",editorOption: {theme: "snow",modules: {toolbar: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{ list: "ordered" }, { list: "bullet" }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],[{ align: [] }],["clean"],],},},};},methods: {submitContent() {console.log("提交的内容：", this.content);},},};
</script>

2、案例解读

（1）导入组件与样式

1. 导入组件

import { quillEditor } from "vue-quill-editor";

2. 导入样式

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

样式	说明
quill.core.css	编辑器的核心样式
quill.snow.css	提供 snow 主题的样式
quill.bubble.css	提供 bubble 主题的样式

（2）注册组件与使用

1. 注册 quillEditor 组件

components: {quillEditor,
},

2. 使用 quillEditor 组件

<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>

（3）定义数据

data() {return {content: "",editorOption: {theme: "snow",modules: {toolbar: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{ list: "ordered" }, { list: "bullet" }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],[{ align: [] }],["clean"],],},},};
},

数据	说明
content	编辑器内容
editorOption	编辑器配置参数

（4）定义方法

• 对编辑器内容进行相关处理

methods: {submitContent() {console.log("提交的内容：", this.content);},
},

---

editorOption: {theme: "snow",modules: {toolbar: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{ list: "ordered" }, { list: "bullet" }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],[{ align: [] }],["clean"],],},
},

---

三、vue-quill-editor 编辑器配置参数解读

1、theme

theme: "snow",

• theme 用于指定编辑器的主题样式，可选值为 snow 或 bubble

1. snow：这是一个带有顶部工具栏的主题，工具栏固定显示在编辑器上方，方便用户随时使用编辑工具

2. bubble’：这是一个没有顶部工具栏的主题，当用户选中文本时，会以气泡菜单的形式弹出编辑工具

2、modules

modules: {toolbar: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{ list: "ordered" }, { list: "bullet" }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],[{ align: [] }],["clean"],],
},

1. modules 是一个对象，用于配置编辑器的各种模块，这里主要配置了 toolbar 模块，即工具栏

2. toolbar 是一个二维数组，每一个子数组代表工具栏上的一行按钮组

["bold", "italic", "underline", "strike"]

1. 这一行配置了四个基本的文本样式按钮，分别是加粗（bold）、斜体（italic）、下划线（underline）、删除线（strike）

2. 点击这些按钮可以对选中文本应用相应的样式

["blockquote", "code-block"]

1. 这一行配置了两个按钮，分别是引用（blockquote）、代码块（code-block）

2. 点击引用按钮可以将选中文本设置为引用格式，点击代码块按钮则将选中文本设置为代码块格式

[{ list: "ordered" }, { list: "bullet" }]

1. 这一行配置了有序列表（ordered）和无序列表（bullet）按钮

2. 点击有序列表按钮可以将选中文本转换为有序列表，点击无序列表按钮则转换为无序列表

[{ header: [1, 2, 3, 4, 5, 6, false] }]

1. 这一行配置了一个标题设置按钮

2. header 后面的数组 [1, 2, 3, 4, 5, 6, false] 表示提供了 1 - 6 级标题选项，false 表示可以将文本设置为普通段落

3. 可以通过下拉菜单选择不同级别的标题

[{ color: [] }, { background: [] }]

1. 这一行配置了两个颜色选择按钮，分别是文字颜色（color）、背景颜色（background）

2. 点击按钮会弹出颜色选择器，用户可以选择所需的颜色

[{ align: [] }]

1. 这一行配置了一个文本对齐方式按钮

2. 点击按钮会弹出对齐方式选项，包括左对齐、居中对齐、右对齐、两端对齐等

["clean"]

1. 这一行配置了一个清除格式按钮

2. 点击该按钮可以清除选中文本的所有格式，将其恢复为普通文本

---

四、vue-quill-editor 事件

1、基本介绍

事件	说明
ready	当编辑器初始化完成并准备好接受用户输入时触发
focus	当编辑器获得焦点时触发
blur	当编辑器失去焦点时触发
change	当编辑器内容发生变化时触发

2、演示

<template><div><quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @ready="onEditorReady" @focus="onEditorFocus" @blur="onEditorBlur" @change="onEditorChange"></quill-editor><button @click="submitContent">提交内容</button></div>
</template><script>import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";export default {components: {quillEditor,},data() {return {content: "",editorOption: {theme: "snow",modules: {toolbar: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{ list: "ordered" }, { list: "bullet" }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],[{ align: [] }],["clean"],],},},};},methods: {submitContent() {console.log("提交的内容：", this.content);},onEditorReady() {console.log("编辑器已准备好");},onEditorFocus() {console.log("编辑器获得焦点");},onEditorBlur() {console.log("编辑器失去焦点");},onEditorChange(e) {console.log("编辑器内容已改变");console.log(e);},},};
</script>