Vue3 富文本：WangEditor
wangEditor
开源 Web 富文本编辑器，开箱即用，配置简单
1. 安装依赖包
npm install @wangeditor/editor-for-vue@next --save2. 在引用页面加入如下代码
<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="modeValue" @onCreated="handleCreated" />
</div>
</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { ref, shallowRef, defineModel } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const modeValue = defineModel()
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const handleCreated = (editor: any) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
原文地址：https://blog.csdn.net/zhzjn/article/details/142830969
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！