針對(duì)chrome類瀏覽器
</br>
1. 有以下方法獲得被選擇的元素
window.getSelection()
</br>
2. 對(duì)DIV 綁定click方法 和 blur 方法（blur的方法的綁定無效則給div添加屬性tabIndex=-1）來保存光標(biāo)位置，方法內(nèi)容如下：
var lastEditRange;
getPosition() {
// 獲取選定對(duì)象
var lastEditSelection = getSelection()
// 設(shè)置最后光標(biāo)對(duì)象
lastEditRange = this.lastEditSelection.getRangeAt(0);
}
3. 插入圖片
insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
addEmoji(emoji: string) {
// 設(shè)置圖片元素兼蕊，css已提前設(shè)置初厚，此例使用精靈圖作元素背景
let emojiText = document.createElement('i');
emojiText.setAttribute('class', `emoji icon-ng2_em_${emoji.replace(/\:/g, '')}`);
emojiText.setAttribute('style', `display:inline-block;`);
emojiText.setAttribute('contenteditable', 'false');
var edit = document.get..... // 獲得你設(shè)置的div元素;
// 編輯框設(shè)置焦點(diǎn)
edit.focus()
// 獲取選定對(duì)象
var selection: any = getSelection()
// 判斷是否有最后光標(biāo)對(duì)象存在
if (lastEditRange) {
// 存在最后光標(biāo)對(duì)象，選定對(duì)象清除所有光標(biāo)并添加最后光標(biāo)還原之前的狀態(tài)
selection.removeAllRanges()
selection.addRange(lastEditRange)
}
let parent1 = selection.anchorNode;
// 判斷選定對(duì)象范圍是編輯框還是文本節(jié)點(diǎn)
if (selection.anchorNode.nodeName != '#text') {
// 如果是編輯框范圍。則創(chuàng)建表情文本節(jié)點(diǎn)進(jìn)行插入
if (parent1.childNodes.length > 0) {
// 如果文本框的子元素大于0产禾，則表示有其他元素排作，則按照位置插入表情節(jié)點(diǎn)
for (var i = 0; i < parent1.childNodes.length; i++) {
if (i == selection.anchorOffset) {
parent1.insertBefore(emojiText, parent1.childNodes[i])
}
}
} else {
// 否則直接插入一個(gè)表情元素
parent1.appendChild(emojiText)
}
} else {
// 如果是文本節(jié)點(diǎn)則先獲取光標(biāo)對(duì)象
let range = getSelection().getRangeAt(0)
// 獲取光標(biāo)對(duì)象的范圍界定對(duì)象，一般就是textNode對(duì)象
let textNode: any = range.startContainer;
console.log(textNode)
// 獲取光標(biāo)位置
let rangeStartOffset = range.startOffset;
// 截取文本亚情，重新插入元素
let textNode1 = document.createTextNode(textNode.data.substr(0, rangeStartOffset));
let textNode2 = document.createTextNode(textNode.data.substr(rangeStartOffset));
let parent = textNode.parentNode;
let nextNode = textNode.nextSibling;
textNode.remove();
if (nextNode) {
parent.insertBefore(textNode1, nextNode)
} else {
parent.appendChild(textNode1);
}
insertAfter(emojiText, textNode1);
insertAfter(textNode2, emojiText);
}
// 創(chuàng)建新的光標(biāo)對(duì)象
var range = document.createRange()
let space = document.createTextNode('');
// edit.appendChild(space);
insertAfter(space, emojiText)
// 光標(biāo)對(duì)象的范圍界定為表情節(jié)點(diǎn)后的空格
range.selectNodeContents(space)
space.deleteData(0, 1)
// 把光標(biāo)位置定位表情節(jié)點(diǎn)后的空格里
range.setStart(space, 0)
range.setEnd(space, 0)
// 使光標(biāo)開始和光標(biāo)結(jié)束重疊
range.collapse(true)
// 清除選定對(duì)象的所有光標(biāo)對(duì)象
selection.removeAllRanges()
// 插入新的光標(biāo)對(duì)象
selection.addRange(range)
// 無論如何都要記錄最后光標(biāo)對(duì)象
if(selection.type !=='None') {
lastEditRange = selection.getRangeAt(0)
}
}
ps： 此方法在手機(jī)端兼容問題比較嚴(yán)重妄痪，建議表情元素用img元素。但依然有些手機(jī)在刪除div文本時(shí)無法刪除表情楞件，或者光標(biāo)異常報(bào)錯(cuò)衫生。待完善。土浸。罪针。。
如果覺得文章對(duì)你有點(diǎn)用的話黄伊，麻煩拿出手機(jī)泪酱，這里有一個(gè)你我都有的小福利（每天一次）： 打開支付寶首頁搜索“8601304”，即可領(lǐng)紅包还最。謝謝支持
