在contenteditable中将表情符号/文本插入到文本末尾

Question

我正在尝试在可编辑内容区域中插入表情符号。但无论何时插入，它都会插入在行的开头。

我正在使用

这是我的代码示例

jQuery(document).on('click', 'a.fg-emoji-picker-item', function(){
    var emoji = jQuery(this).attr('href');
    var el = jQuery('.advanced-th-bp-activity-form');
    el.focus();
    pasteHTMLAtCaret(emoji);
});

而 pasteHTMLAtCaret 函数是

function pasteHTMLAtCaret(html, selectPastedContent) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            console.log(frag);
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

看，这些表情符号是插入到文本的前面，我之前以为这些表情符号是在文本后输入的。

- Tick Twitch

---

你的问题不够清晰。很明显，你不希望表情符号插入到开头，但是你没有说明所需位置。如果你只想在结尾处插入表情符号，那么你不需要25行选择操作逻辑：你可以将表情符号追加到当前字段值。因此，你的目标似乎必须不同，但你没有说明它是什么，而且从代码示例中也不清楚。 - Tom

@Tom 没有人只想在结尾处使用表情符号。由于 JS Range 的结构，需要大量代码才能将表情符号放置在插入符位置，并使插入符立即位于其后面。你会发现，在网页中插入表情符号需要近一秒钟的时间才能出现。我制作了一个复杂的 ContentEditable div，能够处理 Mention Span 和 Emoji Text。这很困难，因为：1-浏览器在插入时添加了更多的 childNodes，2-当焦点移出以进行表情选择器时，您会失去插入符位置，3-Range API 包含每个 childNode 的单独范围，您必须将它们相加，直到找到插入符的实际子位置。 - KeitelDOG

Answer 1

你的选择是错误的！它指向文本开头而不是需要插入表情符号的位置

- Avinash Srivastava