Vue2 前端开发 - vue-quill-editor 富文本编辑器（编辑器基础案例、编辑器配置参数解读、编辑器事件）

一、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>