vue3 富文本编辑器

<template>
  <div>
    <quill-editor v-model:content="editorContent" contentType="html" />
  </div>
</template>

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

// 定义富文本编辑器的内容
const editorContent = ref('<p>这是一个富文本编辑器的示例。</p>');
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 quill-editor 组件，它是一个基于 Quill.js 的富文本编辑器。
   • v-model:content="editorContent" 绑定了富文本编辑器的内容到 editorContent 变量。
   • contentType="html" 指定了内容类型为 HTML。

2. 脚本部分 (<script setup>):

   • 引入了 Vue 3 的 Composition API 和 QuillEditor 组件。
   • ref 创建了一个响应式的 editorContent 变量，初始值为一段 HTML 字符串。
   • 引入了 QuillEditor 的样式文件以确保编辑器的外观正常显示。

3. 样式部分 (<style scoped>):

   • 可以根据需要自定义编辑器的样式。这里使用了 scoped 属性，使得样式只作用于当前组件。

这个示例展示了如何在 Vue 3 中集成和使用一个富文本编辑器。