封裝 Quill 編輯器用於 Vue 3

在現代 Web 開發中，富文字編輯器是一個常見的需求。Quill 是一個強大的富文字編輯器，結合 Vue 3 可以建立出色的編輯體驗。在這篇文章中，我們將探討如何將 Quill 編輯器封裝為一個 Vue 3 元件，使用 @vueup/vue-quill 包進行整合。

安裝依賴

首先，你需要安裝 @vueup/vue-quill 包和 Quill 的 CSS 樣式。可以使用 npm 或 yarn 進行安裝：

npm install @vueup/vue-quill quill

建立 Quill 編輯器元件

接下來，我們將建立一個名為 Editor.vue 的 Vue 元件。這個元件將使用 QuillEditor 元件並實現基本的功能，包括文字更改的監聽和內容的雙向繫結。

元件程式碼

以下是 Editor.vue 的完整程式碼：

<template>
  <quill-editor
    :options="editorOptions"
    contentType="html"
    ref="qeditor"
    @textChange="textChange"
  ></quill-editor>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import 'quill/dist/quill.core.css';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
});    

const emit = defineEmits(['update:modelValue']);
const qeditor = ref(null);

const textChange = () => { 
    const editHTML = qeditor.value?.getHTML();  // 獲取 Quill 例項的 HTML 內容
    if (editHTML) {
        emit('update:modelValue', editHTML);     // 發出事件更新父元件
    }
}

const editorOptions = {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ header: [1, 2, 3, false] }],
            ['bold', 'italic', 'underline'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image'],
            ['clean'],
        ],
    },
}
</script>

<script>
export default {
    name: 'Editor'
}
</script>

<style scoped>
.quill-editor {
  height: 200px; /* 編輯器高度 */
}
</style>

元件說明

1. 模板部分: 使用 <quill-editor> 元件來渲染 Quill 編輯器，並監聽 textChange 事件。

2. 指令碼部分:

• 使用 defineProps 來接收 modelValue，這使得我們能夠與父元件進行雙向繫結。

• emit 用於觸發更新事件，將編輯器的內容傳遞給父元件。

• textChange 方法用於處理內容變化的邏輯，呼叫 Quill 例項的 getHTML 方法獲取當前的 HTML 內容，並透過 emit 更新父元件。

• editorOptions 定義了編輯器的主題和工具欄配置。

3. 樣式部分: 使用 LESS 來設定編輯器的高度。

使用元件

在父元件中，你可以輕鬆使用這個封裝好的 Quill 編輯器。例如：

<template>
  <div>
    <Editor v-model="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Editor from './Editor.vue';

const content = ref('<p>初始內容</p>');
</script>

說明

在父元件中，我們匯入了 Editor 元件並使用 v-model 指令進行雙向繫結。content 是一個響應式變數，初始內容為 <p>初始內容</p>。當用戶在編輯器中輸入內容時，content 會自動更新。

總結

透過封裝 Quill 編輯器，我們能夠為 Vue 3 提供一個靈活且易於使用的富文字編輯器元件。這種封裝不僅提高了程式碼的複用性，還簡化了父元件的使用。希望這篇文章能夠幫助你在專案中快速整合 Quill 編輯器。