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