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

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

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

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

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

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

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

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

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

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

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

   // 如果是文本節(jié)點(diǎn)則先獲取光標(biāo)對(duì)象
            var range = selection.getRangeAt(0)
            // 獲取光標(biāo)對(duì)象的范圍界定對(duì)象，一般就是textNode對(duì)象
            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)位置.