Вставить текст в позиции каретки перестать работать после вставки смайликов - PullRequest
Новая
       35

Вставить текст в позиции каретки перестать работать после вставки смайликов

2 голосов
/ 05 марта 2020

Я пытаюсь вставить текст в позиции каретки, но не получаю правильную позицию, когда вставляю смайлики в текст.

Я создал скрипку ЗДЕСЬ

Я использую ниже emoji jquery плагин

HTML моей страницы, как показано ниже. 

<textarea id="message_rule"></textarea>
<br/><br/>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Tag
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%NAME%]');return false;">Name</a>
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%FIRST_NAME%]');return false;">First Name</a>
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%LAST_NAME%]');return false;">Last Name</a>
    </div>
</div>

Я пробовал растворенный раствор, указанный ЗДЕСЬ , это также работает только с текстом. Как только я вставляю эмодзи, решение не работает.

Мое решение отлично работает, если я вставляю только текст. Если я добавлю в него какие-либо эмодзи, они перестанут работать на позиции после эмодзи.

Javascript

$(document).ready(function() {    
    $("#message_rule").emojioneArea({
        pickerPosition: "bottom"
    });
});

function insertAtCaret(myField,html) {
    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;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}
...