使用vue3封装富文本的完整代码

好的，以下是一个使用 Vue 3 封装富文本编辑器的完整代码示例。这里使用了 Quill.js 作为富文本编辑器库，你需要先安装 Quill.js：

npm install quill

然后你可以创建一个名为 `RichTextEditor.vue` 的组件，代码如下：

<template>
  <div ref="editor"></div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

export default {
  name: 'RichTextEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    this.quill = new Quill(this.$refs.editor, this.options);
    this.quill.on('text-change', this.handleTextChange);
    this.quill.setContents(this.quill.clipboard.convert(this.value));
  },
  beforeUnmount() {
    this.quill.off('text-change', this.handleTextChange);
    this.quill = null;
  },
  methods: {
    handleTextChange() {
      this.$emit('input', this.quill.root.innerHTML);
    }
  }
};
</script>

在这个组件中，我们首先引入了 Quill.js 库和样式文件。然后，在 `mounted` 生命周期中，我们创建了一个 Quill 实例，并将其附加到组件的 `div` 元素上。我们还监听了 `text-change` 事件，以便在文本发生变化时更新组件的 `value` 属性。

在父组件中，你可以使用 `RichTextEditor` 组件来创建一个富文本编辑器，例如：

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

<script>
import RichTextEditor from './RichTextEditor.vue';

export default {
  name: 'MyComponent',
  components: { RichTextEditor },
  data() {
    return {
      content: '',
      editorOptions: {
        modules: {
          toolbar: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline'],
            ['image', 'code-block']
          ]
        },
        scrollingContainer: 'body'
      }
    };
  }
};
</script>

在这个示例中，我们在父组件中使用 `RichTextEditor` 组件，并将其绑定到 `content` 数据中。我们还传递了一个 `options` 属性，以便配置富文本编辑器的选项。在这里，我们仅显示了一些基本的工具栏按钮，以便对文本进行格式化和插入图片。

当用户在富文本编辑器中输入或修改文本时，`content` 数据会自动更新。你可以在提交表单或保存数据时使用这个数据。