vue3 使用Quil

### 集成和使用 Quill 富文本编辑器

#### 安装依赖包
为了在 Vue 3 项目中集成 `@vueup/vue-quill`，需要先通过 npm 或 yarn 来安装必要的库文件。

npm install @vueup/vue-quill quill-blot-formatter

或者如果偏好使用 yarn：

yarn add @vueup/vue-quill quill-blot-formatter

这一步骤确保了项目的 node_modules 下包含了所需的富文本编辑器及其扩展功能模块[^1]。

#### 创建并配置组件

##### 引入基础编辑器与样式
创建一个新的 Vue 组件用于封装 Quill 编辑器实例，在 `<script setup>` 中完成初始化工作。首先加载核心组件以及外观主题 CSS 文件。

// MyQuillEditor.vue
import { defineComponent } from 'vue'
import { Quill, QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default defineComponent({
  components: {
    QuillEditor,
  },
})

##### 注册额外的功能模块
接着注册自定义的图片缩放插件 `BlotFormatter` 到全局 Quill 实例上，以便后续可以在编辑区内操作图像大小。

import BlotFormatter from 'quill-blot-formatter';
Quill.register('modules/blotFormatter', BlotFormatter);

此部分代码应放置于应用入口处或是任何合适的位置来保证只执行一次即可生效。

##### 设置编辑器选项
最后设置好编辑器的各项参数，例如工具栏按钮布局、默认内容等，并将其传递给子组件属性中。

<template>
  <div class="editor-container">
    <QuillEditor 
      theme="snow"
      :options="editorOptions"
      v-model:content="editorContent"
      contentType="html"/>
  </div>
</template>

<script setup>
const editorOptions = ref({
  modules: {
    blotFormatter: true,
    toolbar: [
      ['bold', 'italic'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image']
    ]
  }
})

const editorContent = ref('<p>初始文本...</p>')
</script>

以上便是完整的集成流程说明，按照这些步骤可以顺利地把 Quill Editor 嵌入到基于 Vue 3 的前端应用程序里去。