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

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"/><!-- 编辑器 --><Editorv-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.valueconst toolbar = DomEditor.getToolbar(editor)console.log(toolbar.getConfig().toolbarKeys)}, 1500)
})

2. 内存泄漏防护

onBeforeUnmount(() => {const editor = editorRef.valueeditor?.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

官方资源：