WangEditor 富文本编辑器

基于 wangEditor-next 封装的富文本编辑器，支持图片上传和工具栏配置。在线演示

基础用法

<WangEditor v-model="content" />

自定义高度

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

工具栏配置

通过 toolbar-config 排除不需要的功能按钮：

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

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

图片上传

内置图片上传，默认调用项目的文件上传接口（FileAPI.uploadFile），支持拖拽和粘贴上传。

Props

参数	说明	类型	默认值
modelValue	编辑器内容（v-model），HTML 格式	string	''
height	编辑器高度	string	'500px'
toolbar-config	工具栏配置	Partial<IToolbarConfig>	—

XSS 过滤

编辑器输出 HTML 格式，渲染到页面时建议做 XSS 过滤：DOMPurify.sanitize(content)。