Vaadin富文本编辑器格式化按钮在Safari浏览器中无法正常运行问题咨询

数据老陈

2026-10-15

问题根因

该问题是macOS Big Sur预装的Safari 14及以上版本修改了contenteditable元素的Selection API行为导致的，属于Vaadin Pro富文本编辑器的已知兼容Bug，非用户使用或适配错误，仅在Safari环境下复现，Chrome、Firefox不受影响是因为这两款浏览器未修改对应选区处理逻辑。

解决方案

官方修复方案

直接升级对应Vaadin版本即可，官方已在后续版本内置了Safari选区兼容补丁：

若使用Vaadin 14.x LTS系列，升级到14.7.0及以上版本
若使用Vaadin 20+非LTS系列，升级到21.0.0及以上版本

临时兼容方案（无法升级版本时使用）

可自行添加选区缓存逻辑规避问题，参考代码如下：

const richTextEditor = document.querySelector('vaadin-rich-text-editor');
let lastValidRange = null;

// 缓存正常选区
richTextEditor.addEventListener('selection-change', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    lastValidRange = selection.getRangeAt(0).cloneRange();
  }
});

// 格式操作后恢复选区
richTextEditor.shadowRoot.querySelectorAll('[part*="toolbar-button"]').forEach(button => {
  button.addEventListener('click', () => {
    if (lastValidRange) {
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(lastValidRange);
    }
  });
});