本文將詳細介紹如何在 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
官方資源：
- WangEditor 官網
- GitHub 倉庫
