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()
// 内容 HTML

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

</script>