用 js 的 selection range 操作选择区域内容和图片

原创文章，转载请注明出处并保留地址。原文地址：http://www.cnblogs.com/muge10/p/6723894.html

先放上最后的效果，这是点击图片以前：

这是点击图片以后：

非常清晰，一目了然，就算是小白用户也明白发生了什么。挺好的。

最近在做编辑器相关的东西，遇到一个需求，用户在编辑器中插入或者粘贴的图片要支持点击以后，可以按 Backspace 键或者 Delete 键删除掉。

刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片，但后来查看源码发现这个方法是编辑器内部方法，并没有暴露出来，于是第一个思路走不通了。

第二个思路是在编辑器的顶层容器里监听 keyup 事件，然后判断是否是两个删除键，如果是就拦截，然后找到当前点击的图片，手动删掉。

实际上这也是行不通的，原因有二。首先，这个删除是没法阻止的，因为事件的监听是在顶层父元素里，这时候阻止其实是阻止掉事件在顶层容器上的效果，而不是在发生元素上的效果。所有涉及到事件冒泡的地方，在父容器上阻止效果都是不能达到目的的，只能在事件最开始发生的元素上阻止。

然后，当按下删除键的时候，之前点击的图片已经不是点击状态了，已经拿不到了。因为取消选择在前，删除在后。

后来忽然意识到，想要的效果其实就是点击图片的时候选中图片，就像用户自己选中网页中一段内容那样选中那张图片就好了。页面上点击一个图片默认是没有效果的，我要做的仅仅是点击时候选中这个图片就可以了。这样做的好处是，当用户点击图片选中以后，如果点删除键，无论是 Backspace 还是 Delete 键都可以删除；而且如果用户不像删除，直接点击别的地方，或者按下上下左右箭头就可以取消选择，这和用户平时的操作体验是一样的，根本没有什么副作用。

selection 是 HTML5 的新接口，是 window 的一个方法，用法是 window.getSelection().

取得 selection 以后，要把当前图片加入到选取中，selection 有一个 Selection.selectAllChildren() 方法，但这个方法只能选中元素的全部子元素，而我们要选中的是 img 元素自身，img 元素也没有子元素。于是继续在 selection 的方法中看看有没有别的长的像的方法，果然，找到了 Selection.addRange() 看这长相一看就很像我们要找的人。addRange 方法需要传入一个 range 对象，range是啥呢？

平时在页面上选择东西都是鼠标咔一下框一大片，但如果在编辑器里，其实是可以选择好几个片段的，一般按住 Ctrl / Control 键就可以多处选择。我猜这个 selection 就类似于选中的所有区域，range 就类似于每一个单独的选中的片段，先这么理解。

继续往下看，发现 range 有一个 Range.selectNode() 方法，这不正是我要找的人吗？先创建一个 range 对象，let range = document.createRange()  createRange 是 document 的方法，然后讲当前图片插入 range，再把 range 插入 selection 中即可。代码如下：

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);
    }
}

这个实现方法的最大优点在于利用浏览器原生自带的功能，这样就和用户的操作习惯保持一致，不会有任何的突兀。选中的效果很明显，而且选中以后无论是删除，还是取消，都跟之前习惯一致，都很容易，更要的是这些操作不用再写代码了啊，因为是浏览器原生自带的功能。

嗯，算是比较完美了。

水平有限，如果您发现什么错误或者有别的更好的方法，还请指出，谢谢。