vue3 富文本

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

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

export default {
  components: {
    QuillEditor,
  },
  setup() {
    const editorContent = ref('<p>初始富文本内容</p>');

    return {
      editorContent,
    };
  },
};
</script>

<style scoped>
/* 自定义样式 */
</style>

解释说明：

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

   • 使用了 quill-editor 组件，并通过 v-model:content 绑定编辑器的内容到 editorContent。
   • contentType="html" 指定了内容类型为 HTML。

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

   • 引入了 Vue 3 的响应式 API ref 来创建一个可响应的变量 editorContent，用于存储富文本编辑器的内容。
   • 引入了 QuillEditor 组件，并在 components 中注册。
   • 导入了 Quill 编辑器的默认样式（snow 主题）。

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

   • 可以在这里添加自定义样式，作用范围仅限于当前组件。

这个示例展示了如何在 Vue 3 中集成 Quill 富文本编辑器，并使用双向绑定来管理编辑器的内容。