Vue2 和 Vue3 集成 WangEditor 富文本编辑器及自定义上传实战

Template 部分：

<template>
  <div>
    <Toolbar 
      style="border-bottom: 1px solid #ccc" 
      :editor="editor" 
      :defaultConfig="toolbarConfig" 
      :mode="mode" 
    />
    <Editor 
      style="height: calc(100vh - 120px); overflow-y: hidden;" 
      v-model="form.content" 
      :defaultConfig="editorConfig" 
      :mode="mode" 
      @onCreated="onCreated"
      @onChange="onChange"
      @onFocus="onFocus"
      @onBlur="onBlur"
      @onDestroyed="onDestroyed"
      @customAlert="customAlert"
      @customPaste="customPaste"
    />
  </div>
</template>

Vue3 实现方式

Vue3 推荐使用 Composition API。这里有个关键点：编辑器实例必须用 shallowRef，否则会导致性能问题或响应式丢失。

<script setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { uploadFileAPI } from '@/api/commonApi'
import { onBeforeUnmount, ref, shallowRef, reactive } from 'vue'

const form = reactive({ content: '' })
const mode = 'default'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const toolbarConfig = {}
const editorConfig = { 
  placeholder: '请输入内容...', 
  MENU_CONF: {} 
}

// 组件销毁时，记得销毁编辑器实例，避免内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor) editor.destroy()
})

// 回调函数
const handleCreated = (editor) => {
  console.log('created', editor)
  editorRef.value = editor
}

const handleChange = (editor) => {
  console.log('change:', editor.getHtml())
}

const handleDestroyed = (editor) => {
  console.log('destroyed', editor)
}

const handleFocus = (editor) => {
  console.log('focus', editor)
}

const handleBlur = (editor) => {
  console.log('blur', editor)
}

const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`)
}

const customPaste = (editor, event, callback) => {
  console.log('ClipboardEvent', event)
  editor.insertText('xxx')
  callback(true) // 返回 true 继续默认粘贴行为
}
</script>

模板结构与 Vue2 类似，只需将 editor 替换为 editorRef 即可。

3. 自定义图片上传功能

默认的上传功能可能无法满足业务需求（如需要鉴权、存储路径定制）。我们可以通过配置 MENU_CONF 来实现。

首先确保安装了相关插件（虽然新版通常内置，但旧版可能需要）：

npm i @wangeditor/plugin-mention --save

在配置文件中添加自定义上传逻辑：

// 自定义图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {
  async customUpload(file, insertFn) {
    try {
      // 实际场景请对接你的后端接口
      let res = await uploadFileAPI({ file })
      // 参数依次为：url, alt, href
      insertFn(res.data.filePath, 'image', res.data.filePath)
    } catch (error) {
      console.error(error)
    }
  }
}

除了完全自定义，官方也提供了一些便捷配置项，适合快速接入标准接口：

editorConfig.MENU_CONF['uploadImage'] = {
  server: '/api/upload',           // 服务端地址
  base64LimitSize: 5 * 1024,       // 小于 5kb 转为 base64
  fieldName: 'your-custom-name',   // 表单字段名
  maxFileSize: 1 * 1024 * 1024,    // 最大 1M
  maxNumberOfFiles: 10,            // 最多 10 个
  allowedFileTypes: ['image/*'],   // 文件类型限制
  meta: { token: 'xxx' },          // 附加参数
  headers: { Accept: 'text/x-json' },
  withCredentials: true,           // 是否携带 cookie
  timeout: 5 * 1000                // 超时时间
}

4. 自定义视频上传功能

视频上传原理与图片一致，只需将配置 Key 改为 uploadVideo。注意 insertFn 的参数顺序不同，通常需要传入视频 URL 和封面图 URL。

editorConfig.MENU_CONF['uploadVideo'] = {
  async customUpload(file, insertFn) {
    try {
      let res = await uploadFileAPI({ file })
      // 参数依次为：videoUrl, posterUrl
      insertFn(res.data.filePath, res.data.posterPath)
    } catch (error) {
      console.error(error)
    }
  }
}

至此，我们就完成了在 Vue2 和 Vue3 中集成 WangEditor 并实现自定义媒体上传的全过程。根据实际后端接口调整 uploadFileAPI 的逻辑即可上线使用。