contenteditable文本编辑器选中文本按钮组的事件监听异常问题

问题根源 #

你用mouseup事件的问题在于：它的触发时机和选区变化不同步，而且点击页面任何区域都会触发——哪怕你点击别处取消选中，mouseup仍会执行，但此时的选区状态可能还没来得及更新，或者误判了选区的归属（比如页面其他元素的选区）。另外，mouseup也覆盖不了键盘选中文本的场景（比如Shift+方向键）。

正确的监听方案：使用selectionchange事件 #

selectionchange是浏览器原生的选区变化监听事件，不管是鼠标选中、键盘选中还是取消选中，只要选区状态改变就会触发，完全适配contenteditable元素的场景。

优化后的代码 #

// 监听全局选区变化事件
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  const isSelectionInEditor = selection.anchorNode && el.contains(selection.anchorNode);

  if (selectedText.length > 0 && isSelectionInEditor) {
    console.log(selectedText, "active");
    // 这里写显示按钮组的逻辑，比如计算选区位置后显示
  } else {
    console.log("false");
    // 隐藏按钮组
  }
});

关键细节说明 #

• 判断选区归属：通过el.contains(selection.anchorNode)确保选区是在你的contenteditable编辑器内，避免页面其他元素的选区触发逻辑。
• 兼容键盘操作：selectionchange会响应键盘选中文本的操作，比mouseup覆盖场景更全。
• 实时同步状态：选区变化的瞬间就会触发事件，不会出现状态不同步的问题。

额外优化：处理按钮组的位置计算 #

如果需要把按钮组显示在选中文本下方，可以用getBoundingClientRect()获取选区的位置：

if (selectedText.length > 0 && isSelectionInEditor) {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  // 按钮组的位置可以基于rect.bottom和rect.left来设置
  buttonGroup.style.top = `${rect.bottom + window.scrollY}px`;
  buttonGroup.style.left = `${rect.left + window.scrollX}px`;
  buttonGroup.style.display = 'block';
} else {
  buttonGroup.style.display = 'none';
}

内容的提问来源于stack exchange，提问作者Enes Giray