WangEditor 富文本编辑器

基于 WangEditor 封装的富文本编辑器组件。

在线演示：https://vue.youlai.tech/#/demo/wang-editor

版本说明

项目使用 wangEditor-next 代替原版已停止更新的 wangEditor。

基本用法

<template>
  <WangEditor v-model="content" />
</template>

<script setup lang="ts">
const content = ref('')
</script>

自定义高度

<template>
  <WangEditor v-model="content" height="600px" />
</template>

<script setup lang="ts">
const content = ref('初始化内容')
</script>

Props

参数	说明	类型	默认值
modelValue	编辑器内容（支持 v-model）	string	''
height	编辑器高度	string	'300px'
placeholder	占位文本	string	'请输入内容...'

功能特性

• 双向绑定 — 支持 v-model
• 自定义高度 — 通过 height 属性设置
• 图片上传 — 支持拖拽和粘贴
• 工具栏配置 — 可排除不需要的功能
• Markdown 支持 — 内置 Markdown 语法

图片上传

编辑器默认使用项目的文件上传接口：

const editorConfig = {
  MENU_CONF: {
    uploadImage: {
      server: '/api/v1/files',
      fieldName: 'file',
      maxFileSize: 5 * 1024 * 1024, // 5MB
    },
  },
}

工具栏配置

<WangEditor v-model="content" :toolbar-config="toolbarConfig" />

<script setup lang="ts">
const toolbarConfig = { excludeKeys: ['group-video'] }
</script>

注意事项

版本说明

项目使用 wangeditor-next 而非原版，因为原版已停止维护。

内容获取

编辑器输出 HTML 格式，渲染时建议做 XSS 过滤：

pnpm add dompurify

import DOMPurify from 'dompurify'
const safeContent = DOMPurify.sanitize(content)

---

下一步：ECharts 图表 · VXETable 表格