Vue3 中富文本的使用

1.安装依赖包

npm install @wangeditor/editor-for-vue@next --save

2. 在需要引用的页面加入如下代码即可使用

<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'
//编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const valueHtml = ref('')
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
//编辑器结束
//获取编辑器html内容
const getHtml = ()=>{
   console.log(valueHtml.value);
}
</script>