富文本编辑器

富文本：带样式，多格式的文本，在前端一般使用标签配合内联样式实现

富文本编辑器：用于编写富文本内容的容器

wangEditor

官网：快速开始 | wangEditor

1.引入CSS定义样式

2.定义HTML结构

3.引入JS创建编辑器

4.监听内容改变，保存在隐藏文本域（便于后期收集）

editor.setHtml(内容)//设置富文本编辑器的内容

vue-quill

vue3使用

官网：VueQuill | Rich Text Editor Component for Vue 3

安装

 pnpm add @vueup/vue-quill@latest

使用

局部使用

先导包

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

再使用

<QuillEditor theme="snow"></QuillEditor>

 添加数据双向绑定，注意要一起设置内容类型

          <QuillEditor
            v-model:content="formModel.content"
            content-type="html"
            theme="snow"
          ></QuillEditor>

重置内容

组件ref名.value.setHTML(内容)