在Vue3中使用富文本

在Vue3中使用富文本编辑器可以使用@wangeditor/editor-for-vue插件。首先，需要安装依赖包`npm install @wangeditor/editor-for-vue@next --save`。然后，在需要引用的页面中添加相应的代码，如下所示：

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
    <Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" @onCreated="handleCreated" />
  </div>
  <button @click="getHtml">获取Html</button>
</template>

<script setup lang="ts">
import { ref, shallowRef } from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const editorRef = shallowRef()
const valueHtml = ref('')

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const getHtml = () =>{
  console.log(valueHtml.value);
}
</script>

以上代码中，我们通过`<Editor>`和`<Toolbar>`组件实现了富文本编辑功能。`editorRef`用于记录编辑器实例，`valueHtml`是编辑器内容的数据绑定，`handleCreated`方法用于初始化编辑器实例，`getHtml`方法用于获取编辑器中的HTML内容。