Vue3——富文本

1. Quill

npm i -S quill @vueup/vue-quill

<QuillEditor v-model:content="content" contentType="html" theme="essential" />

官方文档：https://quill.nodejs.cn/docs/quickstart

2. Wangeditor

npm i -S @wangeditor/editor-for-vue@next

<template><div style="border: 1px solid black;"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" /><Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" @onCreated="handleCreated" /></div>
</template><script setup lang="ts">
import { shallowRef, ref } from 'vue';
import { Toolbar, Editor } from "@wangeditor/editor-for-vue"
import '@wangeditor/editor/dist/css/style.css'const editorRef = shallowRef();
const valueHtml = ref('');const handleCreated = (v) => {editorRef.value = v
}
</script>

官方文档：https://www.wangeditor.com/v5/getting-started.html