vue组合式API书写 富文本编辑域的使用及获取值

富文本编辑器是一种常见的文本编辑工具，可以实现很多复杂的文本排版和编辑效果。在Vue中，可以使用组合式API来书写富文本编辑器相关的代码。

首先，需要安装一个富文本编辑器的库，例如Quill或者TinyMCE。安装完成后，在Vue组件中引入富文本编辑器的库，并且在模板中添加富文本编辑器的DOM元素。

<template>
  <div>
    <div id="editor"></div>
    <button @click="getValue()">获取值</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Quill from 'quill';

export default {
  setup() {
    const editor = ref(null);

    onMounted(() => {
      const quill = new Quill('#editor', {
        theme: 'snow'
      });
      editor.value = quill;
    });

    const getValue = () => {
      console.log(editor.value.root.innerHTML);
    };

    return {
      editor,
      getValue
    }
  }
}
</script>

在上面的代码中，我们使用了Vue的组合式API。首先，使用`ref`函数创建一个响应式的`editor`变量。然后，在`onMounted`钩子函数中，初始化Quill富文本编辑器，并把编辑器的实例保存在`editor`变量中。最后，定义一个`getValue`函数来获取编辑器中的内容。在`getValue`函数中，我们可以通过`editor.value.root.innerHTML`来获取编辑器中的HTML内容。

在模板中，使用`<div id="editor"></div>`来创建一个富文本编辑器的DOM元素，并且使用`@click`事件来触发`getValue`函数。在`getValue`函数中，我们可以通过`console.log`来打印编辑器中的HTML内容。

总结来说，使用组合式API来书写富文本编辑器的代码，可以提高代码的可读性和可维护性。通过响应式变量和钩子函数，我们可以方便地管理富文本编辑器的状态和行为。