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

以下是基于 Vue 3 和 TypeScript 封装富文本编辑器的示例代码：

<template>
  <div class="editor-container">
    <div ref="editor" contenteditable="true"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'

export default defineComponent({
  setup() {
    const editorRef = ref<HTMLDivElement | null>(null)

    const handleEditorInput = () => {
      const editorValue = editorRef.value?.innerHTML
      console.log('Editor value:', editorValue)
    }

    onMounted(() => {
      editorRef.value?.addEventListener('input', handleEditorInput)
    })

    onUnmounted(() => {
      editorRef.value?.removeEventListener('input', handleEditorInput)
    })

    return {
      editorRef,
    }
  },
})
</script>

<style scoped>
.editor-container {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
}
</style>

这是一个最基本的富文本编辑器，可以通过 `ref` 获取到编辑器 `div` 元素，监听 `input` 事件获取编辑器内容。使用这个基本结构，可以根据具体需求进行进一步开发和优化。