contentEditable中的实时表情-光标定位

Question

我尝试使我的内容可编辑div对诸如“ :)”之类的输入表情作出反应，并将其转换为图像。问题是我需要在该div中替换内部HTML，这会导致将光标移动到字段的第一个位置。我使用函数，通过在内容的末尾移动光标为我提供了解决方案，但是如果用户想在内容的中间插入表情符号（或其他符号/字母），并且想开始，该怎么办？从这个位置开始写作的下一部分？不幸的是，脚本总是将光标移到最后。如何解决？

let textField = document.querySelector('.textfield');
        let emoji = {
            ':)': '<img src="../../assets/img/emoji/happy.png">',
            ':(': '<img src="../../assets/img/emoji/sad.png">',
            ':|': '<img src="../../assets/img/emoji/neutral.png">'
        };
        textField.addEventListener('input', (e) => {
            textField.innerHTML = textField.innerHTML.replace(/\:\)|\:\(|\:\|/gi, (matched) => {
                return emoji[matched];
            });

            Array.from(textField.childNodes).forEach((node, i) => {
                let matches = node.textContent.match(/\:\)|\:\(|\:\|/gi);
            });

            if (textField.childNodes.length) {
                let startNode = textField.childNodes[textField.childNodes.length - 1];
                let range = document.createRange();
                range.selectNodeContents(textField);
                range.setStartAfter(startNode);

                let sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }

        }, false);

我使用角度6分量。