Vue3 + wangEditor实战：如何像搭积木一样扩展一个自定义菜单（以“首行缩进”为例）

Vue3与wangEditor深度整合：打造模块化自定义菜单的工程实践

在Vue3的组件化生态中，富文本编辑器的自定义功能开发往往面临两个核心挑战：如何保持代码的可维护性，以及如何实现功能的即插即用。本文将以"首行缩进"功能为例，演示如何基于Composition API构建一个符合现代前端工程标准的编辑器扩展方案。

1. 环境搭建与架构设计

1.1 初始化Vue3项目结构

首先创建标准的Vue3项目结构，特别为编辑器功能划分独立模块：

src/ ├── components/ │ ├── editor/ │ │ ├── plugins/ │ │ │ └── textIndent.ts # 菜单实现 │ │ └── WangEditor.vue # 主组件 ├── composables/ │ └── useEditor.ts # 编辑器逻辑复用

这种结构将编辑器核心逻辑与UI组件分离，便于后续功能扩展。使用TypeScript能获得更好的类型提示：

// tsconfig.json { "compilerOptions": { "types": ["wangeditor"] } }

1.2 安装依赖与版本选择

当前稳定版本组合：

npm install wangeditor@5.1.23 vue@3.2.47

版本兼容性对照表：

2. 核心实现：可组合的菜单插件

2.1 基于Composition API的菜单封装

在textIndent.ts中，我们采用类+组合式函数混合开发模式：

import { BtnMenu } from 'wangeditor' import type { IDomEditor } from '@wangeditor/core' class TextIndentMenu extends BtnMenu { private readonly indentValue = '2em' constructor(editor: IDomEditor) { const $elem = `<div class="w-e-menu">import { onMounted, onBeforeUnmount, shallowRef } from 'vue' import type { IDomEditor } from '@wangeditor/core' export function useEditor(containerRef: Ref<HTMLElement>) { const editor = shallowRef<IDomEditor | null>(null) const init = (plugins: Array<{key: string, factory: Function}>) => { editor.value = new Editor({ selector: containerRef.value, config: { menus: ['bold', 'header', ...plugins.map(p => p.key)], onCreated(instance) { plugins.forEach(({key, factory}) => { instance.menus.extend(key, factory(instance)) }) } } }) } onBeforeUnmount(() => { editor.value?.destroy() }) return { editor, init } }

3. Vue组件集成方案

3.1 主编辑器组件实现

WangEditor.vue采用SFC方式集成：

<template> <div class="editor-container"> <div ref="toolbar" class="toolbar"></div> <div ref="editor" class="content"></div> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import { useEditor } from '../composables/useEditor' import { useTextIndent } from './plugins/textIndent' const toolbarRef = ref<HTMLElement>() const editorRef = ref<HTMLElement>() const { editor } = useEditor(editorRef) onMounted(() => { editor.init([useTextIndent()]) }) </script> <style scoped> .editor-container { border: 1px solid #ddd; border-radius: 4px; } .toolbar { border-bottom: 1px solid #eee; } .content { min-height: 300px; padding: 10px; } </style>

3.2 菜单状态响应式处理

通过watchEffect实现菜单激活状态同步：

const activeMenus = ref<Set<string>>(new Set()) watchEffect(() => { if (!editor.value) return editor.value.on('selectionChange', () => { const newActive = new Set<string>() editor.value?.menus.menuList.forEach(menu => { if (menu.isActive()) newActive.add(menu.key) }) activeMenus.value = newActive }) })

4. 高级扩展技巧

4.1 多实例管理方案

对于需要多个编辑器实例的场景，建议采用工厂模式：

export function createEditorFactory() { const instances = new Map<string, IDomEditor>() const create = (id: string, config: EditorConfig) => { const instance = new Editor({...config, selector: `#${id}`}) instances.set(id, instance) return instance } const destroy = (id: string) => { instances.get(id)?.destroy() instances.delete(id) } return { create, destroy, instances } }

4.2 自定义菜单的单元测试

使用Jest进行菜单功能测试：

describe('TextIndentMenu', () => { let editor: IDomEditor let menu: TextIndentMenu beforeEach(() => { editor = createMockEditor() menu = new TextIndentMenu(editor) }) test('should toggle indent style', () => { const mockElem = { style: { textIndent: '' } } jest.spyOn(editor.selection, 'getSelectionRangeTopNodes') .mockReturnValue([mockElem]) menu.exec(editor, '') expect(mockElem.style.textIndent).toBe('2em') menu.exec(editor, '') expect(mockElem.style.textIndent).toBe('') }) })

4.3 性能优化建议

编辑器操作性能对比：

实现防抖处理的改进版本：

function createDebouncedHandler(editor: IDomEditor, delay = 300) { let timer: number return (handler: Function) => { clearTimeout(timer) timer = setTimeout(() => { editor.disable() try { handler() } finally { editor.enable() } }, delay) } }

在大型表单场景中，这种优化可以减少30%-40%的渲染卡顿。实际项目中，建议结合Vue的keep-alive组件管理编辑器实例的挂载状态：

<template> <keep-alive> <wang-editor v-if="active" /> </keep-alive> </template>