Vue 3 整合 WangEditor 富文本编辑器：从基础到高级实践

news2025/3/6 6:37:55

WangEditor Cover

本文将详细介绍如何在 Vue 3 项目中集成 WangEditor 富文本编辑器，实现图文混排、自定义扩展等高阶功能。

一、为什么选择 WangEditor？

作为国内流行的开源富文本编辑器，WangEditor 具有以下优势：

轻量高效：压缩后仅 1.5MB，远小于其他同类产品
开箱即用：提供 Vue/React 官方封装组件
扩展性强：支持自定义菜单、异步图片上传等
安全可靠：内置 XSS 过滤机制

二、快速集成到 Vue 项目

1. 安装依赖

npm install @wangeditor/editor @wangeditor/editor-for-vue

2. 基础组件封装

<template>
  <div class="editor-wrapper">
    <!-- 工具栏 -->
    <Toolbar 
      :editor="editorRef" 
      :defaultConfig="toolbarConfig"
    />
    
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例（必须使用 shallowRef）
const editorRef = shallowRef()

// 内容数据绑定
const valueHtml = ref('<p>初始内容</p>')
</script>

三、核心功能实现

1. 图片上传集成

editorConfig.MENU_CONF['uploadImage'] = {
  allowedFileTypes: ['image/*'],
  customUpload: async (file, insertFn) => {
    try {
      const ossUrl = await uploadToOSS(file) // 对接云存储
      insertFn(ossUrl, '图片描述') // 插入编辑器
    } catch (error) {
      console.error('上传失败:', error)
    }
  }
}

注：推荐结合七牛云/阿里云 OSS 实现文件存储

2. 数据双向绑定

// 父组件传值
watch(() => props.modelValue, (newVal) => {
  if (valueHtml.value !== newVal) {
    valueHtml.value = newVal
  }
})

// 子组件更新
watch(valueHtml, (newVal) => {
  emit('update:modelValue', newVal)
})

3. 工具栏定制

// 隐藏不常用功能
const toolbarConfig = {
  excludeKeys: [
    'fullScreen', 
    'codeBlock', 
    'code'
  ]
}

四、高级实践技巧

1. 动态获取工具栏配置

onMounted(() => {
  setTimeout(() => {
    const editor = editorRef.value
    const toolbar = DomEditor.getToolbar(editor)
    console.log(toolbar.getConfig().toolbarKeys)
  }, 1500)
})

2. 内存泄漏防护

onBeforeUnmount(() => {
  const editor = editorRef.value
  editor?.destroy() // 必须销毁实例
})

3. 内容变化监听

const handleCreated = (editor) => {
  editorRef.value = editor
  
  // 监听编辑器变化
  editor.on('change', () => {
    console.log('内容变化:', editor.getHtml())
  })
}

五、最佳实践建议

样式隔离：通过外层容器限制编辑器宽度

.editor-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #eee;
}

性能优化：
- 使用 shallowRef 存储编辑器实例
- 避免频繁操作 DOM

安全策略：

启用 XSS 过滤

editorConfig = {
  MENU_CONF: {
    uploadImage: {
      customAlert: (s) => { 
        alert(s) 
      }
    }
  }
}

使用组件：

<RichTextEditor v-model="content" />

六、总结

通过本文的实践，我们已经实现了：
✅ 编辑器的完整集成
✅ 云端图片上传
✅ 数据双向绑定
✅ 工具栏定制
✅ 内存安全防护

预览功能：https://blog.csdn.net/m0_69838795/article/details/146050001?fromshare=blogdetail&sharetype=blogdetail&sharerId=146050001&sharerefer=PC&sharesource=m0_69838795&sharefrom=from_link

官方资源：