封装 Quill 编辑器用于 Vue 3

远之喵
2,277 阅读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 lang="less" 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 编辑器中，通过自定义工具栏可以实现语言的本地化。这种方法可以让用户使用自己熟悉的语言进行编辑，提高用户体验。下面我们将展示如何通过自定义工具栏实现语言本地化。

自定义工具栏实现语言本地化

1. 修改工具栏 HTML

首先，您可以更新工具栏的选项文本，使其支持多语言。这里以中文为例：

<div id="toolbar">
  <select class="ql-header">
    <option selected>正文</option>
    <option value="1">标题1</option>
    <option value="2">标题2</option>
    <option value="3">标题3</option>
    <option value="4">标题4</option>
    <option value="5">标题5</option>
    <option value="6">标题6</option>
  </select>
  <select class="ql-color">
    <option selected></option>
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
    <option value="orange">橙色</option>
    <option value="purple">紫色</option>
    <option value="black">黑色</option>
  </select>
  <select class="ql-background">
    <option selected></option>
    <option value="yellow">黄色</option>
    <option value="pink">粉色</option>
    <option value="lightblue">浅蓝色</option>
    <option value="lightgreen">浅绿色</option>
    <option value="lightgrey">浅灰色</option>
  </select>
  
  <select class="ql-align">
    <option selected></option>
    <option value="center">居中</option>
    <option value="right">右对齐</option>
    <option value="justify">左对齐</option>
  </select>

  <select class="ql-size">
    <option value="small">小号</option>
    <option selected>标准</option>
    <option value="large">大号</option>
    <option value="huge">超大号</option>
  </select>

  <button class="ql-indent" value="-1">减少缩进</button>
  <button class="ql-indent" value="+1">增加缩进</button>

  <button class="ql-bold">加粗</button>
  <button class="ql-italic">斜体</button>
  <button class="ql-underline">下划线</button>
  <button class="ql-link">链接</button>
</div>

2. 更新 Vue 组件

在 Vue 组件中，您已经定义了 quill-editor 组件。确保将 toolbar 属性指向自定义的工具栏 ID。

<quill-editor
    toolbar="#toolbar"
    :options="editorOptions"
    contentType="html"
    ref="qeditor"
    @textChange="textChange"
    style="height: 200px;"
></quill-editor>

效果图

image.png

总结

通过自定义工具栏和动态语言切换，我们可以轻松实现 Quill 编辑器的本地化，这不仅提升了用户体验，还增强了应用的灵活性。结合封装 Quill 编辑器的方法，我们为 Vue 3 提供了一个灵活且易于使用的富文本编辑器组件。这种封装提高了代码的复用性，简化了父组件的使用，帮助您快速集成 Quill 编辑器，满足用户在熟悉环境中进行编辑的需求。

avatar
文章
阅读
粉丝