无界内嵌编辑器键盘事件失效

前言

腾讯无界微前端框架内嵌UniverJS Excel编辑器，两者都有自己的键盘点击事件处理方式，因为是内嵌缘故，导致无界拦截了事件，键盘按键失效，可以单元格追加文本不可以使用回车，方向键，删除等操作。

问AI，一直在监听事件处理兜圈子，实际上并没用

txt 复制代码

分析代码结构和无界环境问题
查看现有的 fixWujieKeyboard 函数实现
改进键盘事件修复方案，支持所有按键（回车、空格、删除等）
测试验证修复效果

原因

无界拦截了监听事件
无界官网

解决

安装无界插件wujie-polyfill插件，解决边界兼容性问题

尽管无界框架本身已经处理了大多数隔离和通信问题，但在某些特殊场景下，由于浏览器差异或第三方库的特定实现，可能会遇到一些边界兼容性问题。为此，无界官方提供了 wujie-polyfill 补丁包，专门用于解决这些棘手的问题。

什么情况下需要安装 wujie-polyfill？

富文本编辑器（如 tinymce）出现光标/选中问题 - 问题现象：在无界框架下使用富文本编辑器（如 tinymce），可能会遇到双击选中文本异常、粘贴复制后光标位置丢失等问题。 - 解决方案：引入 wujie-polyfill 的 SelectionPlugin 插件，该插件会在操作前后手动记录和恢复光标位置，确保编辑体验正常。
Firefox 浏览器 + Ant Design (v4) 出现报错或遮挡 - 问题现象： - instanceof 检测失败：在 Firefox 浏览器下，使用 Ant Design 4 的 Select、Popover 等组件时，控制台可能报错（如 htmlelement is null）。 - 弹窗被遮挡：Popover、Tooltip 等弹出层位置计算错误，被主应用的导航栏或父级容器遮挡。 - 解决方案： - 对于报错问题，引入 InstanceofPlugin 插件。 - 对于遮挡问题，除了尝试使用 Ant Design 的 getPopupContainer 属性外，有时需要一个自定义插件来修正 getRootNode 的指向（专门针对 Firefox 的补丁）。
代码编辑器（如 Codemirror5）频繁触发 blur 事件 - 问题现象：使用 CodeMirror 5 版本时，在无界内可能会一直触发 blur（失焦）事件，导致编辑体验异常。 - 解决方案：官方建议升级到 CodeMirror 6。虽然没有直接提到用 polyfill 解决，但这属于已知的兼容性问题，值得留意。

如何使用 wujie-polyfill？

当你确认遇到上述问题时，可以按以下步骤引入 wujie-polyfill。

安装 npm i wujie-polyfill -S 或 yarn add wujie-polyfill
在主应用中配置 plugins

在加载子应用的或组件中，通过 plugins 属性引入补丁插件。示例：同时解决 Firefox 的报错和遮挡问题

js 复制代码

import { InstanceofPlugin } from "wujie-polyfill";

// 在你的子应用组件配置中
<WujieReact
  name="your-app"
  url="your-url"
  plugins={[
    // 1. 解决 Firefox 下 Antd 组件报错 (instanceof 检测失败)
    InstanceofPlugin(),
    // 2. 解决 Firefox 下弹窗被遮挡 (自定义插件修正 getRootNode)
    {
      patchElementHook(element, iframeWindow) {
        try {
          Object.defineProperties(element, {
            getRootNode: {
              configurable: true,
              get: () => iframeWindow.Node.prototype.getRootNode,
            },
          });
        } catch (error) {
          console.warn(error);
        }
      },
    },
  ]}
/>

参考文章：微前端：无界wujie简单上手