自制通用WYSIWYG编辑器：选中<var>内文本删除无法移除标签的解决问询

这个场景我做自定义编辑器时也踩过坑！你现在的问题根源很明确：range.selectNodeContents(elem)只会选中标签内部的文本内容，而不是整个元素节点，所以退格键只会删除文本，留下空的标签。

核心修改方案 #

把selectNodeContents替换成selectNode，让Range直接选中整个元素，这样选中范围就包含了标签本身，退格时会一并删除：

var range = document.createRange();
// 选中整个<var>元素，而非仅内部内容
range.selectNode(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

额外注意事项 #

• 确保点击事件中获取的elem是标签本身：如果你的点击事件绑定在文本节点上，记得用event.target.closest('var')向上查找父级元素，避免选中范围错误。
• 兼容性验证：selectNode在所有现代浏览器和IE9+都支持，符合通用编辑器的需求。

测试一下：点击标签后，整个标签会被高亮选中，按下退格键就能一次性删除标签和内部文本了～

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