用 js 的 selection range 操作選擇區域內容和圖片

先放上最后的效果，這是點擊圖片以前：

這是點擊圖片以后：

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

最近在做編輯器相關的東西，遇到一個需求，用戶在編輯器中插入或者粘貼的圖片要支持點擊以后，可以按 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);
 }
}

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

嗯，算是比較完美了。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！