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

這個實現方法的最大優點在於利用瀏覽器原生自帶的功能，這樣就和用戶的操作習慣保持一致，不會有任何的突兀。選中的效果很明顯，而且選中以後無論是刪除，還是取消，都跟之前習慣一致，都很容易，更要的是這些操作不用再寫代碼了啊，因為是瀏覽器原生自帶的功能。

嗯，算是比較完美了。

水平有限，如果您發現什麼錯誤或者有別的更好的方法，還請指出，謝謝。