Vue3 富文本：WangEditor

wangEditor

开源 Web 富文本编辑器，开箱即用，配置简单

wangEditor

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="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()
// 内容 HTMLconst handleCreated = (editor: any) => {editorRef.value = editor // 记录 editor 实例，重要！
}</script>