quill富文本编辑器vue3

Quill富文本编辑器是一个流行的JavaScript库，用于创建交互式的、现代化的文本输入体验。它支持Markdown语法，并提供了丰富的API，允许开发者轻松地在Vue 3应用程序中集成实时富文本编辑功能。

在Vue 3中使用Quill，首先需要安装`@vue/quill-editor`包，这通常通过npm或yarn命令完成：

npm install @vue/quill-editor
# 或者
yarn add @vue/quill-editor

然后，在组件中导入并配置Quill实例：

<template>
  <div>
    <quill-editor v-model="content" :options="editorOptions"></quill-editor>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import QuillEditor from '@vue/quill-editor';

const content = ref('');
const editorOptions = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 标题等基本样式
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['indent', 'outdent'],            // 段落对齐
      [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
      [{'color': []}, {'background': []}],  // 颜色和背景
      [{ history: true }]                // 文本历史记录
    ],
    // 更多模块配置...
  },
  theme: 'snow' // 可选主题，如'snow'或'dark'
};
</script>

在这个例子中，`v-model`绑定内容，而`editorOptions`定义了编辑器的外观和功能。你可以根据需求自定义这些选项。