探索 contenteditable= true 的DIV 表情的插入

针对chrome类浏览器

1. 有以下方法获得被选择的元素

window.getSelection()

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”，即可领红包。谢谢支持