针对chrome类浏览器
</br>
1. 有以下方法获得被选择的元素
window.getSelection()
</br>
2. 对DIV 绑定click方法 和 blur 方法（blur的方法的绑定无效则给div添加属性tabIndex=-1）来保存光标位置，方法内容如下：
var lastEditRange;
getPosition() {
// 获取选定对象
var lastEditSelection = getSelection()
// 设置最后光标对象
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) {
// 设置图片元素，css已提前设置，此例使用精灵图作元素背景
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..... // 获得你设置的div元素;
// 编辑框设置焦点
edit.focus()
// 获取选定对象
var selection: any = getSelection()
// 判断是否有最后光标对象存在
if (lastEditRange) {
// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()
selection.addRange(lastEditRange)
}
let parent1 = selection.anchorNode;
// 判断选定对象范围是编辑框还是文本节点
if (selection.anchorNode.nodeName != '#text') {
// 如果是编辑框范围。则创建表情文本节点进行插入
if (parent1.childNodes.length > 0) {
// 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
for (var i = 0; i < parent1.childNodes.length; i++) {
if (i == selection.anchorOffset) {
parent1.insertBefore(emojiText, parent1.childNodes[i])
}
}
} else {
// 否则直接插入一个表情元素
parent1.appendChild(emojiText)
}
} else {
// 如果是文本节点则先获取光标对象
let range = getSelection().getRangeAt(0)
// 获取光标对象的范围界定对象，一般就是textNode对象
let textNode: any = range.startContainer;
console.log(textNode)
// 获取光标位置
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);
}
// 创建新的光标对象
var range = document.createRange()
let space = document.createTextNode('');
// edit.appendChild(space);
insertAfter(space, emojiText)
// 光标对象的范围界定为表情节点后的空格
range.selectNodeContents(space)
space.deleteData(0, 1)
// 把光标位置定位表情节点后的空格里
range.setStart(space, 0)
range.setEnd(space, 0)
// 使光标开始和光标结束重叠
range.collapse(true)
// 清除选定对象的所有光标对象
selection.removeAllRanges()
// 插入新的光标对象
selection.addRange(range)
// 无论如何都要记录最后光标对象
if(selection.type !=='None') {
lastEditRange = selection.getRangeAt(0)
}
}
ps： 此方法在手机端兼容问题比较严重，建议表情元素用img元素。但依然有些手机在删除div文本时无法删除表情，或者光标异常报错。待完善。。。。
如果觉得文章对你有点用的话，麻烦拿出手机，这里有一个你我都有的小福利（每天一次）： 打开支付宝首页搜索“8601304”，即可领红包。谢谢支持
