AngularJS监听Delete/Backspace事件执行strikeThrough命令求助

我明白你想实现的效果：选中文本后按Delete或Backspace，不删除内容而是给它加上删除线。你的代码思路是对的，但可能在事件时机和执行细节上出了问题，我帮你调整下：

问题分析 #

你的原代码同时绑定了keydown和keyup事件，而且没有检查是否真的有选中内容——这可能导致命令执行时机不对，或者在无选中时误触发。另外，$document[0]如果不是编辑器所在的文档（比如编辑器在iframe里），execCommand也不会生效。

修复后的代码 #

$container.bind('keydown', function (e) {
    // 先确认是目标按键，且存在选中的文本
    const isDeleteKey = e.keyCode === 8 || e.keyCode === 46;
    const hasSelectedText = window.getSelection().toString().length > 0;

    if (isDeleteKey && hasSelectedText) {
        // 针对编辑器所在文档执行删除线命令
        const targetDoc = $container[0].ownerDocument || document;
        targetDoc.execCommand('strikeThrough', false, null);
        
        // 阻止浏览器默认的删除行为
        e.preventDefault();
        // 可选：阻止事件冒泡，避免其他逻辑干扰
        e.stopPropagation();
    }
});

关键优化点 #

1. 只绑定keydown事件：keyup触发时浏览器已经完成了默认的删除动作，这时候再执行命令就晚了，keydown是拦截默认行为的最佳时机。
2. 检查选中内容：避免在没有选中文本时误触发删除线命令。
3. 定位正确的文档对象：如果你的编辑器是嵌入在iframe中的，必须使用编辑器所在的文档来执行execCommand，否则命令不会作用到选中的文本上。
4. 规范execCommand参数：第三个参数传null（虽然strikeThrough不需要额外参数，但保持参数完整性更稳妥）。

额外提示 #

如果你的编辑器是基于第三方库（比如Quill、CKEditor），可能需要用它们提供的API来操作内容，而不是直接用execCommand——原生命令可能会和编辑器的内部逻辑冲突。但如果是自定义的简单富文本编辑器，上面的代码应该可以正常工作。

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