vue3怎么添加富文本编辑器

你可以使用第三方库来添加富文本编辑器到Vue 3项目中。一个流行的富文本编辑器库是Quill.js。

以下是在Vue 3中添加Quill.js富文本编辑器的步骤：

1. 首先，你需要安装Quill.js。打开终端并运行以下命令：

npm install quill

2. 在你的Vue组件中，导入Quill和Quill的CSS文件：

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

3. 在组件的`mounted`钩子函数中，初始化Quill编辑器并绑定到DOM元素上：

mounted() {
  const options = {
    theme: 'snow' // 可根据需要选择主题
  }
  this.editor = new Quill(this.$refs.editor, options)
}

4. 在模板中添加一个元素来作为编辑器容器，并使用`ref`属性引用它：

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

现在，你已经成功将Quill.js富文本编辑器添加到Vue 3项目中了。你可以根据需要进一步配置和使用Quill的各种功能。请参阅Quill.js的官方文档以获取更多信息和示例代码。

注意：这只是一个示例，你还可以尝试其他富文本编辑器库，如TinyMCE、CKEditor等。