富文本工具栏按钮状态无法根据选中内容动态更新怎么办?

子皓(打工版) 阅读 38

我在给编辑器实现粗体按钮时,监听selectionchange事件后按钮状态一直没变化:


document.addEventListener('selectionchange', function() {
  const selection = window.getSelection().toString();
  if(selection.trim()) {
    this.toggleButton('bold', true);
  } else {
    this.toggleButton('bold', false);
  }
});

function toggleButton(name, active) {
  // 更新按钮激活状态的逻辑
}

控制台没报错但按钮就是不亮,明明手动调用toggleButton方法能正常切换。尝试过在工具栏点击时能正确获取到选区样式,就是实时监听这块卡住了

我来解答 赞 6 收藏
二维码
手机扫码查看
1 条解答
Tr° 梓豪
document.addEventListener监听的回调函数里this指向不对,你代码里的toggleButton应该是某个对象的方法,this上下文不对导致没生效。加个bind(this)或者用箭头函数:

document.addEventListener('selectionchange', (event) => {
const selection = window.getSelection().toString();
if(selection.trim()) {
this.toggleButton('bold', true);
} else {
this.toggleButton('bold', false);
}
});

或者调试看看this的指向,打印console.log(this)就能发现不是预期的对象实例。另外建议用getSelection().anchorNode判断更准确,toString()有时候会不准。
点赞 3
2026-02-07 14:00