wangEditor 5 富文本编辑器质量保障指南300 测试用例与多浏览器兼容实现拆解【免费下载链接】wangEditorwangEditor, open-source Web rich text editor 开源 Web 富文本编辑器项目地址: https://gitcode.com/gh_mirrors/wa/wangEditorwangEditor 是一款开源 Web 富文本编辑器支持 JS、Vue、React 集成。仓库当前wangeditor/editor主包版本为 5.1.23整体采用 lerna yarn workspaces 管理 8 个包。对富文本编辑器来说真正难写的部分往往不在工具栏而在于不同浏览器、不同输入法下的输入行为差异。这篇文章基于仓库真实代码路径讲清楚三件事兼容层是如何吸收浏览器差异的、300 条测试用例如何覆盖这些行为、以及如何在本地跑起来复现和定位问题。 项目结构8 个包组成的 lerna monorepowangEditor 5 的packages/目录把编辑器拆成职责清晰的包包路径职责corepackages/core/核心能力slate 数据模型 snabbdom 渲染、编辑区事件处理、菜单框架、HTML 解析与生成editorpackages/editor/主入口createEditor/createToolbar注册默认菜单与配置basic-modulespackages/basic-modules/标题、引用、代码块、颜色、图片、链接、缩进、待办、撤销重做等基础模块list-modulepackages/list-module/有序列表 / 无序列表table-modulepackages/table-module/表格及增删行列操作code-highlightpackages/code-highlight/代码块语法高亮装饰upload-image-modulepackages/upload-image-module/图片上传video-modulepackages/video-module/视频插入与上传本地跑起来的流程在 docs/dev.md 中有说明yarn bootstrap安装依赖yarn dev打包全部模块然后进入packages/editor执行yarn example浏览器打开http://localhost:8881/examples/即可看到效果注意改完代码重新打包后要强制刷新浏览器。 兼容层设计从 UA 检测到处方药式处理集中式浏览器能力检测所有这个浏览器能不能做某事的判断都收敛在 packages/core/src/utils/ua.ts 中导出一组布尔常量// packages/core/src/utils/ua.ts节选 export const IS_IOS typeof globalThis.navigator ! undefined typeof globalThis.window ! undefined /iPad|iPhone|iPod/.test(navigator.userAgent) !globalThis.window.MSStream // Firefox / Edge 旧版不支持 beforeinput 事件 // Chrome 75 及以下对 beforeinput 支持不完整 export const HAS_BEFORE_INPUT_SUPPORT !IS_CHROME_LEGACY !IS_EDGE_LEGACY typeof globalThis ! undefined globalThis.InputEvent typeof globalThis.InputEvent.prototype.getTargetRanges function同一个文件里还有IS_SAFARI、IS_FIREFOX、IS_CHROME、IS_QQBROWSER等常量。把检测集中在一处的好处是后续任何浏览器差异处理都引用这些常量而不是散落的 UA 字符串匹配。事件处理层的 COMPAT 分支核心编辑区的事件处理器位于 packages/core/src/text-area/event-handlers/每一处为特定浏览器开的小灶都带有COMPAT:注释可以直接全文检索定位。几个典型例子文件处理的浏览器差异focus.tsFirefox 下焦点可能落入嵌套的可编辑元素导致键盘导航异常需要强制把焦点拉回编辑器根节点blur.tsSafari 在 contenteditable 失焦后不总是清除选区需要手动removeAllRanges()syncSelection.tsFirefox 中创建 range 后还必须 focus 元素表格前后光标位置需要特殊重置避免选区贴在 table 上composition.tsChrome/Firefox 拼音输入会暴露多余 text 节点Safari/Firefox 在链接后输入会造成不可逆的 DOM 结构变化用setNewKey强刷整行输入法IME的兼容逻辑集中在composition.tscomposition 开始时记录当前 text 内容composition 结束时统一通过 slate 的insertText落库顺带完成maxLength对拼音输入的长度校验如果拼音输入跨越了 DOM 文本节点对应 issue wangEditor-v5#47还会把起始节点还原保证选区不错位。输入与粘贴的降级链路输入主链路是 beforeInput.ts先preventDefault()劫持全部富文本输入再按inputType分派到Editor的各种原子操作。对不支持 beforeInput 的浏览器由HAS_BEFORE_INPUT_SUPPORT判定直接跳过该处理器退回 keypress/keydown 路径处理。粘贴链路在 paste.ts 中逻辑很短// 先给用户配置钩子拦截机会 const { customPaste } editor.getConfig() if (customPaste) { const res customPaste(editor, event) if (res false) return // 自行实现粘贴 } // 支持 beforeInput 且非纯文本粘贴html、图片等时交给 beforeInput 处理 if (HAS_BEFORE_INPUT_SUPPORT !isPlainTextOnlyPaste(event)) returncustomPaste是暴露给使用者的配置项定义见 packages/core/src/config/interface.ts返回false即可完全接管粘贴行为做内容净化或格式转换都从这里入手。▶️ 质量保障Jest 单元测试 Cypress E2E 两层验证测试体系在 docs/test.md 中有完整说明当前仓库实际包含 133 个测试文件、300 条it()用例单元测试Jest从底层 API 角度验证功能各包的__tests__/目录按模块组织如basic-modules/__tests__/header/、table-module/__tests__/menu/覆盖 parse-html、render-elem、elem-to-html、menu 等维度。运行命令yarn run test带覆盖率用yarn run test-c。E2E 测试Cypress针对编辑器这类强交互产品做集成验证。用例集中在 cypress/integration/现有 editor.spec.ts 访问 examples 页面、点击创建按钮后断言工具栏和编辑区 DOM 属性正确生成。开发模式运行yarn e2e:dev会先起 example 服务再打开 Cypress UI纯跑用例用yarn e2e。 本地排障用 examples 页面复现问题packages/editor/examples/ 下有一组独立页面每个页面聚焦一个场景适合按症状对号入座default-mode.html默认完整形态、huge-doc.html大文档性能、shadow-dom.html、theme.html、i18n.html、maxlength.html、multi-editors.html、parse-html.html、upload-image.html等。定位某个浏览器下的输入或粘贴异常时先在对应 example 页面复现再对照上一节的事件处理器文件断点排查比直接在业务项目里调试高效得多。两个可操作的下一步本地先跑yarn run test和yarn e2e确认基线全绿再开始改代码避免把历史问题当成自己的问题。遇到具体浏览器行为异常时先grep -r COMPAT packages/core/src确认是否已有针对性处理未覆盖的场景可按 docs/test.md 的目录规范补充测试用例想深入参与开发可参考 docs/join.md。【免费下载链接】wangEditorwangEditor, open-source Web rich text editor 开源 Web 富文本编辑器项目地址: https://gitcode.com/gh_mirrors/wa/wangEditor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考