仿微信在對話框文字中插入Emoji表情包

場景

相似於微信聊天的一個對話框,要求能夠使用EMOJI表情,對話框是一個div,經過改變contentEditable屬性使得內容能夠編輯.

問題

Emoji表情在頁面中實際上是GIF格式的IMG標籤.若是直接在innerHTML中改變,會致使表情包只出如今文本最後,因此這樣是不符合用戶體驗的,須要跟蹤光標的位置.在用戶點擊文本或者文本框失去焦點時候保存光標位置,點擊表情時在光標最後位置插入.
div.innerHTML += <img/>

思路

1.webkit內核的瀏覽器中能夠直接使用getSelection()獲取selection對象.以及其中的range對象

range(範圍)指的是文檔中連續的一部分。一個範圍包括整個節點，也能夠包含節點的一部分，例如文本節點的一部分。用戶一般下只能選擇一個範圍

var selObj = window.getSelection();
var range  = selObj.getRangeAt(0);

在div的onclick以及onblur事件中綁定保存光標位置

saveSelection() {
    this.lastEditRange = window.getSelection().getRangeAt(0);
}

2.在添加表情事件觸發時,首先檢查是否存在光標位置,若是存在則在最後位置插入,不存在就在文本末尾插入

// 判斷是否有最後光標對象存在
        if (this.lastEditRange) {
            // 存在最後光標對象，選定對象清除全部光標並添加最後光標還原以前的狀態
            selection.removeAllRanges()
            selection.addRange(this.lastEditRange)
        }

3.最後就是對光標位置的處理

// 若是是文本節點則先獲取光標對象
            var range = selection.getRangeAt(0)
            // 獲取光標對象的範圍界定對象，通常就是textNode對象
            var frag;
            if (range.createContextualFragment) {
                frag = range.createContextualFragment(emojiInput);
            } else {
                var container = document.createElement("div");
                container.innerHTML = emojiInput;
                frag = document.createDocumentFragment();
                var child;
                var title;
                for (; child = container.firstChild;) {
                    title = frag.appendChild(child);
                }
            }
            var node = frag.lastChild;
            range.insertNode(frag);
            range.setStartAfter(node);
            selection.removeAllRanges();
            selection.addRange(range);

4.最後仍是要保存一次光標位置.

效果展現