vue32 怎么使用富文本编辑域

在 Vue3.2 中使用富文本编辑器需要先安装相应的富文本编辑器库，比如 quill、tinymce、ckeditor 等等。一般来说，这些库都提供了 Vue 组件的封装，可以方便地在 Vue3.2 中使用。

以 quill 为例，安装方法如下：

安装 quill：

npm install quill

在 Vue3.2 的组件中引入 quill：

import Quill from 'quill'
import 'quill/dist/quill.snow.css'

在 Vue3.2 的组件中使用 quill：

<template>
  <div>
    <div ref="quillEditor"></div>
    <button @click="getContent">获取内容</button>
  </div>
</template>

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

export default {
  mounted() {
    this.quill = new Quill(this.$refs.quillEditor, {
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block']
        ]
      },
      placeholder: '请输入内容',
      theme: 'snow'
    })
  },
  methods: {
    getContent() {
      console.log(this.quill.root.innerHTML)
    }
  }
}
</script>

在上面的例子中，我们在 mounted 钩子函数中初始化了 quill 编辑器，并将其挂载到 this.$refs.quillEditor 这个 div 元素上。同时，我们定义了一个工具栏，包括了一些常用的格式化选项，比如加粗、斜体、下划线等等。在最后，我们定义了一个 getContent 方法，用于获取编辑器中的内容。

需要注意的是，quill 返回的内容是一段 HTML 字符串，需要进行相应的处理后再进行展示。另外，由于 quill 在编辑器中使用了一些自定义的 DOM 结构，因此需要进行相应的样式调整，以确保最终展示效果符合需求。