富文本工具栏按钮状态无法根据选中内容动态更新怎么办?
我在给编辑器实现粗体按钮时,监听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方法能正常切换。尝试过在工具栏点击时能正确获取到选区样式,就是实时监听这块卡住了
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()有时候会不准。