摘要：一個范圍包括整個節(jié)點，也可以包含節(jié)點的一部分，例如文本節(jié)點的一部分。

類似于微信聊天的一個對話框,要求可以使用EMOJI表情,對話框是一個div,通過改變contentEditable屬性使得內(nèi)容可以編輯.

Emoji表情在頁面中其實是GIF格式的IMG標(biāo)簽.如果直接在innerHTML中改變,會導(dǎo)致表情包只出現(xiàn)在文本最后,所以這樣是不符合用戶體驗的,需要跟蹤光標(biāo)的位置.在用戶點擊文本或者文本框失去焦點時候保存光標(biāo)位置,點擊表情時在光標(biāo)最后位置插入.
div.innerHTML +=

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

range(范圍)指的是文檔中連續(xù)的一部分。一個范圍包括整個節(jié)點，也可以包含節(jié)點的一部分，例如文本節(jié)點的一部分。用戶通常下只能選擇一個范圍

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

在div的onclick以及onblur事件中綁定保存光標(biāo)位置

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

2.在添加表情事件觸發(fā)時,首先檢查是否存在光標(biāo)位置,如果存在則在最后位置插入,不存在就在文本末尾插入

   // 判斷是否有最后光標(biāo)對象存在
        if (this.lastEditRange) {
            // 存在最后光標(biāo)對象，選定對象清除所有光標(biāo)并添加最后光標(biāo)還原之前的狀態(tài)
            selection.removeAllRanges()
            selection.addRange(this.lastEditRange)
        }

3.最后就是對光標(biāo)位置的處理

   // 如果是文本節(jié)點則先獲取光標(biāo)對象
            var range = selection.getRangeAt(0)
            // 獲取光標(biāo)對象的范圍界定對象，一般就是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.最后還是要保存一次光標(biāo)位置.