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
      allowedFileTypes: ['image/*']
    }
  }
}

工具栏配置

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

<script setup lang="ts">
const toolbarConfig = {
  excludeKeys: [
    'group-video' // 排除视频上传
  ]
}
</script>

注意事项

1. 版本说明

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

2. 内容获取

编辑器内容为 HTML 格式，可以直接渲染：

<template>
  <div v-html="content"></div>
</template>

3. XSS 防护

渲染用户输入的 HTML 时，建议进行 XSS 过滤：

pnpm add dompurify

import DOMPurify from 'dompurify'

const safeContent = DOMPurify.sanitize(content)

相关链接

• WangEditor 文档
• Element Plus