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