WangEditor 富文本编辑器

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

版本说明

项目使用 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	'500px'
placeholder	占位文本	string	'请输入内容...'

Events

事件名	说明	回调参数
update:modelValue	内容变化时触发	(value: string)

图片上传

富文本编辑器默认接入 youlai-boot 的文件上传接口。

默认配置

编辑器使用 FileAPI.upload() 接口上传图片：

// 上传图片回调函数类型
type InsertFnType = (url: string, alt: string, href: string) => void

// 编辑器配置
const editorConfig = ref<Partial<IEditorConfig>>({
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      customUpload(file: File, insertFn: InsertFnType) {
        // 上传图片，并将返回的图片地址通过 insertFn 插入到编辑器
        FileAPI.upload(file).then((res) => {
          insertFn(res.url, res.name, res.url)
        })
      }
    }
  }
})

对接其他后端

如需对接其他后端服务，修改 src/components/WangEditor/index.vue 文件中的 customUpload 方法：

MENU_CONF: {
  uploadImage: {
    customUpload(file: File, insertFn: InsertFnType) {
      // 自定义上传逻辑
      yourUploadAPI(file).then((response) => {
        // 调用 insertFn 插入图片
        insertFn(response.imageUrl, response.fileName, response.imageUrl)
      })
    }
  }
}

提示

• 使用 youlai-boot 后端，无需修改任何代码
• 对接其他后端时，只需在 customUpload 方法中实现自定义上传逻辑
• 上传成功后调用 insertFn 方法插入图片地址

功能特性

• ✅ 富文本编辑（文字、段落、样式等）
• ✅ 图片上传（支持自定义上传接口）
• ✅ 工具栏配置（可自定义工具栏按钮）
• ✅ 内容绑定（支持 v-model 双向绑定）
• ✅ 自定义高度（支持动态设置编辑器高度）

示例

查看完整示例：src/views/demo/wang-editor.vue

相关链接

• wangEditor-next 文档
• 文件上传组件