如何通知contenteditable编辑器的粗体工具栏按钮光标已定位到粗体节点？

嘿，这个需求我之前做富文本编辑器的时候也碰到过，给你分享几个实用的实现思路和模式吧！

1. 监听光标/选区变化事件 #

首先得捕获光标位置或选区的变化，这是触发按钮状态更新的核心。常用的两个事件：

• selectionchange：全局事件，只要页面上的选区（包括光标位置）变化就会触发，兼容性拉满
• 可编辑区域的input事件：内容修改时触发，但纯光标移动不修改内容时不会触发，所以建议和selectionchange配合使用

示例代码：

document.addEventListener('selectionchange', () => {
  // 调用你已经实现的检测方法，判断光标是否在粗体节点内
  const isInBold = checkIfCursorInBold();
  // 更新按钮状态
  updateBoldButtonState(isInBold);
});

2. 封装按钮状态更新逻辑 #

把按钮状态切换的逻辑抽成通用函数，以后加斜体、下划线这类按钮时直接复用就行：

function updateBoldButtonState(isActive) {
  const boldBtn = document.querySelector('.toolbar button');
  if (!boldBtn) return;
  
  if (isActive) {
    boldBtn.classList.add('active');
  } else {
    boldBtn.classList.remove('active');
  }
}

如果以后要加更多格式按钮，建议给按钮加个data-type属性（比如<button data-type="bold">Bold</button>），然后把函数改成通用的updateToolbarButtonState(type, isActive)，更灵活。

3. 优化体验：初始化与防抖 #

• 初始化状态：页面加载完成后要主动执行一次状态检测，不然初始状态下按钮可能和光标位置不匹配
• 防抖优化：selectionchange触发频率很高（比如快速移动光标），加个防抖可以减少不必要的DOM操作，提升性能

示例防抖实现：

function debounce(func, delay = 80) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖包装监听函数
document.addEventListener('selectionchange', debounce(() => {
  const isInBold = checkIfCursorInBold();
  updateBoldButtonState(isInBold);
}));

// 页面加载时初始化状态
window.addEventListener('load', () => {
  const isInBold = checkIfCursorInBold();
  updateBoldButtonState(isInBold);
});

4. 特殊场景处理：跨节点选区 #

如果光标选中了部分粗体+部分非粗体的文本，这时候要根据你的产品需求决定按钮状态：是只要有粗体就激活，还是全选粗体才激活？可以通过window.getSelection()获取选区，遍历选区的Range对象，检查范围内的节点是否包含粗体元素。

适合扩展的观察者模式 #

如果你的编辑器以后要加更多功能，比如多个工具栏组件、实时预览等，可以用观察者模式来解耦状态和UI：

// 简单的事件发射器，用来管理状态变化
class EditorStateEmitter {
  constructor() {
    this.listeners = {};
  }

  // 订阅事件
  on(eventName, callback) {
    if (!this.listeners[eventName]) {
      this.listeners[eventName] = [];
    }
    this.listeners[eventName].push(callback);
  }

  // 发布事件
  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(callback => callback(data));
    }
  }
}

// 初始化状态发射器
const editorState = new EditorStateEmitter();

// 监听光标变化，发布格式状态事件
document.addEventListener('selectionchange', debounce(() => {
  const isBoldActive = checkIfCursorInBold();
  editorState.emit('formatUpdate', { bold: isBoldActive });
}));

// 工具栏按钮订阅事件，更新自身状态
const boldBtn = document.querySelector('.toolbar button');
editorState.on('formatUpdate', (state) => {
  state.bold ? boldBtn.classList.add('active') : boldBtn.classList.remove('active');
});

这种模式下，状态变化和UI更新完全解耦，以后加新的格式按钮或者其他组件，只需要订阅事件就行，不用修改核心的状态检测逻辑。

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