先放上最后的效果，这是点击图片以前：
这是点击图片以后：
非常清晰，一目了然，就算是小白用户也明白发生了什么。挺好的。
最近在做编辑器相关的东西，遇到一个需求，用户在编辑器中插入或者粘贴的图片要支持点击以后，可以按 Backspace 键或者 Delete 键删除掉。
刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片，但后来查看源码发现这个方法是编辑器内部方法，并没有暴露出来，于是第一个思路走不通了。
第二个思路是在编辑器的顶层容器里监听 keyup 事件，然后判断是否是两个删除键，如果是就拦截，然后找到当前点击的图片，手动删掉。
实际上这也是行不通的，原因有二。首先，这个删
在本文中，我们将探讨如何使用JavaScript的`Selection`和`Range`对象来处理文本选择以及与图片相关的操作，特别是如何实现在编辑器中点击图片后能够通过Backspace或Delete键删除图片的功能。这个需求通常出现在富文本编辑器的开发过程中，以提供与用户习惯一致的交互体验。
我们面临的问题是编辑器没有暴露删除图片的内部方法，因此无法直接调用。作者尝试了通过监听顶层容器的keyup事件来检测Backspace和Delete键的按下，但这种方法存在两个问题。一是事件冒泡导致在顶层父元素上阻止事件并不能阻止图片的删除，因为阻止的是事件在顶层容器上的传播，而非在实际触发事件的元素上。二是按下删除键时，之前的点击状态已经消失，无法获取到当前被点击的图片。
解决这个问题的关键在于模拟用户对图片的选择行为。HTML5引入了`Selection`接口，允许我们操作用户的选择范围。我们可以通过`window.getSelection()`获取当前的`Selection`对象，然后将图片元素添加到选择范围内。`Selection`对象提供了一个方法`selectAllChildren()`，但它用于选中元素的所有子元素，而我们的目标是选中图片元素本身。因此，我们需要使用`Selection.addRange()`方法，但在此之前，我们需要一个`Range`对象。
`Range`对象代表了文档中的一个连续部分，它可以是选中的文本，也可以是单独的节点。当我们按住Ctrl/Control键进行多选时，`Selection`对象包含多个`Range`。创建`Range`对象使用`document.createRange()`，然后通过`Range.selectNode()`方法将图片元素添加到这个`Range`中。通过`Selection.addRange()`将`Range`添加到`Selection`中，从而实现图片的选中。
以下是一个简单的示例代码：
```javascript
let checkClickImg = function(e) {
let target = e.target;
if (target.nodeName.toLowerCase() === 'img') {
// 清除已有的选区
window.getSelection().removeAllRanges();
let selection = window.getSelection();
let range = document.createRange();
range.selectNode(target);
selection.addRange(range);
}
}
```
通过这种方式，当用户点击图片时，图片会被选中，用户按下Backspace或Delete键时，浏览器会按照预期删除选中的图片。同时，由于选中和取消选择的行为遵循了用户的常规操作习惯，因此不会造成任何不自然的用户体验。
`Selection`和`Range`对象在处理文本选择和富文本编辑器中的图像操作时非常有用。它们允许开发者模拟用户的行为，如选择内容、剪切、复制和删除，这些都是浏览器原生支持的功能，能提供更流畅的交互体验。在本例中，通过合理使用这些API，我们成功地实现了在编辑器中点击图片并按Backspace或Delete键删除图片的功能，而无需编写复杂的删除逻辑。
