写一段vue3+ts富文本编辑器代码

以下是一个简单的富文本编辑器使用 Vue 3 和 TypeScript 实现的代码示例：

<template>
  <div>
    <div ref="editor" contenteditable></div>
    <button @click="onSave">Save</button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const editor = ref<HTMLElement | null>(null)

    const onSave = () => {
      if (editor.value) {
        const content = editor.value.innerHTML
        // 保存富文本内容
      }
    }

    return { editor, onSave }
  }
})
</script>

上述代码中，我们使用了 `ref` 函数来创建一个对编辑器 `div` 元素的引用。这个引用被赋值为一个泛型类型，即 `HTMLElement | null`，表示这个引用可能为空。

我们在 `setup` 函数中定义了一个名为 `onSave` 的方法，它会获取编辑器中的 HTML 内容并将其保存。我们在模板中绑定了这个方法到一个按钮上，当用户点击按钮时，就会触发保存操作。

需要注意的是，这个示例中的富文本编辑器还不完整，缺少了一些必要的功能，例如插入图片、修改字体等等。这些功能可以通过引入第三方富文本编辑器库来实现。