React Syncfusion富文本编辑器横向滚动时表格弹窗位置异常

问题场景 #

使用React Syncfusion RichTextEditor v20.3.50版本时，插入超出屏幕宽度的表格后，点击横向溢出区域内的单元格，表格行列交互的快捷菜单会向右偏移。检查发现菜单容器的left计算值未扣除iframe的横向滚动距离，导致定位错误。目前临时通过left: 50% !important将菜单固定在中间，但需求是菜单始终定位在点击的单元格位置。

代码示例 #

<RichTextEditorComponent
  style={style}
  value={value}
  iframeSettings={{ enable: true }}
  id="imageRTE"
  ref={setRteObj}
  toolbarSettings={toolbarSettings}
  created={onCreate}
  quickToolbarSettings={quickToolbarSettings}
  enableResize={true}
>
  <Inject services={[Toolbar, Image, Link, HtmlEditor, Table, Resize, QuickToolbar]} />
</RichTextEditorComponent>

解决方案 #

原因分析 #

因为RTE启用了iframeSettings.enable: true，表格快捷菜单的定位逻辑未考虑iframe的横向滚动偏移量，导致计算的left值没有减去滚动距离，最终菜单偏移到右侧。

修复步骤 #

通过监听iframe的滚动和单元格点击事件，实时修正菜单的定位坐标：

1. 在RTE的created回调中，获取iframe实例并添加监听事件
2. 计算单元格的实际位置，结合iframe的滚动偏移量，修正菜单的left值

const onCreate = () => {
  const rteIframe = document.getElementById('imageRTE').querySelector('.e-rte-iframe');
  const iframeWindow = rteIframe.contentWindow;
  const iframeDoc = rteIframe.contentDocument || iframeWindow.document;

  // 监听iframe横向滚动，实时修正菜单位置
  iframeWindow.addEventListener('scroll', adjustTableQuickMenuPosition);

  // 监听单元格点击，触发位置修正
  iframeDoc.addEventListener('click', (e) => {
    if (['TD', 'TH'].includes(e.target.tagName)) {
      setTimeout(adjustTableQuickMenuPosition, 10);
    }
  });

  // 核心修正逻辑
  function adjustTableQuickMenuPosition() {
    const quickMenu = iframeDoc.querySelector('.e-table-quick-toolbar');
    const activeCell = iframeDoc.querySelector('.e-table-selected-cell');
    if (!quickMenu || !activeCell) return;

    const scrollLeft = iframeWindow.scrollX;
    const cellRect = activeCell.getBoundingClientRect();
    const menuWidth = quickMenu.offsetWidth;

    // 计算菜单居中于单元格的正确left值
    const correctLeft = cellRect.left + (cellRect.width / 2) - (menuWidth / 2) - scrollLeft;
    quickMenu.style.left = `${correctLeft}px`;
  }
};

额外建议 #

• 该问题属于Syncfusion旧版本的定位逻辑缺陷，建议升级到v22.x及以上版本，官方已在后续版本中修复了此类iframe内元素定位的问题
• 避免长期依赖!important的CSS临时方案，会降低样式灵活性，优先使用JS逻辑动态修正定位

内容的提问来源于stack exchange，提问作者Luis Leon Gonzalez