vue-quill-editor富文本编辑器 vue3

### 集成和使用 `vue-quill-editor` 富文本编辑器于 Vue 3

#### 安装依赖包
为了在 Vue 3 中集成 `vue-quill-editor`, 开发者需先通过 npm 或 yarn 来安装此组件库以及 Quill 的样式文件。

npm install vue-quill-editor quill@1.3.7 --save

或者如果偏好使用 yarn:

yarn add vue-quill-editor quill@1.3.7

注意这里指定了 Quill 版本为 1.3.7, 这是因为 `vue-quill-editor` 和特定版本的 Quill 更加兼容[^1]。

#### 引入并注册全局或局部组件

##### 方法一：作为插件引入（推荐）
创建一个 plugin 文件来配置 `vue-quill-editor`.

// plugins/quillEditor.js
import { createApp } from 'vue';
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css'; 
import 'quill/dist/quill.snow.css'; 
import 'quill/dist/quill.bubble.css';

export default function(app){
    app.use(VueQuillEditor);
}

随后，在 main.js 中应用这个插件：

import App from './App.vue'
import quillEditorPlugin from '@/plugins/quillEditor'

const app = createApp(App)

app.use(quillEditorPlugin);

app.mount('#app')

这种方法使得整个应用程序都可以访问到该富文本编辑器而无需重复导入.

##### 方法二：按需加载/局部注册
对于只需要在一个页面使用的场景下，可以选择这种方式减少打包体积.

<template>
  <div id="editor">
      <!-- 使用 editor -->
      <quill-editor ref="myTextEditor"
                    :content="content"
                    @change="onEditorChange($event)"
                    @blur="onEditorBlur($event)">
      </quill-editor>
  </div>
</template>

<script setup lang="ts">
import { ref, defineComponent } from 'vue';
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

let content = ref('<p>Hello world!</p>');

function onEditorBlur(editor) {
  console.log('editor blur!', editor);
}

function onEditorChange({ editor, html, text }) {
  console.log('editor change!', editor, html, text);
  content.value = html;
}
</script>

上述代码展示了如何定义一个简单的富文本编辑框，并监听其变化事件[^2]. 此外还包含了基本样式的引入以确保外观正常显示。