vue3怎么使用富文本

Vue 3 中使用富文本编辑器需要借助第三方库，比较常用的是 Quill 和 TinyMCE。以下是使用 Quill 富文本编辑器的步骤：

1. 安装 Quill：在项目根目录下执行以下命令安装 Quill：

   npm install vue-quill-editor

2. 引入 Quill：在需要使用富文本编辑器的组件中引入 Quill 和其样式：

   import 'quill/dist/quill.core.css';
   import 'quill/dist/quill.snow.css';
   import 'quill/dist/quill.bubble.css';
   import { quillEditor } from 'vue-quill-editor';

3. 注册组件：在 Vue 组件中注册 `quillEditor` 组件：

   export default {
     components: {
       quillEditor
     }
   }

4. 使用组件：在模板中使用 `quillEditor` 组件，并绑定一个 v-model，可以通过该 v-model 获取到用户输入的富文本内容：

   <template>
     <div>
       <quill-editor v-model="content" :options="editorOptions"></quill-editor>
     </div>
   </template>

5. 配置选项：为富文本编辑器配置一些选项，例如工具栏、字体、大小等等。可以在 Vue 组件的 `data` 方法中定义 `editorOptions` 对象，并将其传递给 `quillEditor` 组件的 `options` 属性：

   export default {
     data() {
       return {
         content: '',
         editorOptions: {
           placeholder: '请输入内容...',
           modules: {
             toolbar: [
               ['bold', 'italic', 'underline', 'strike'],
               ['blockquote', 'code-block'],
               [{ 'header': 1 }, { 'header': 2 }],
               [{ 'list': 'ordered' }, { 'list': 'bullet' }],
               [{ 'script': 'sub' }, { 'script': 'super' }],
               [{ 'indent': '-1' }, { 'indent': '+1' }],
               [{ 'direction': 'rtl' }],
               [{ 'size': ['small', false, 'large', 'huge'] }],
               [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
               [{ 'color': [] }, { 'background': [] }],
               [{ 'font': [] }],
               [{ 'align': [] }],
               ['clean'],
               ['link', 'image', 'video']
             ]
           }
         }
       }
     }
   }

这样，你就可以在 Vue 3 中使用 Quill 富文本编辑器了。当用户在编辑器中输入内容时，`content` 的值会自动更新。