Как вставить смайлик по позиции курсора?

Question

[Алексей Черток]

Всем привет. Подскажите пожалуйста как сделать правильно следующую вещь.

Мне нужно вставлять смайлики в div contenteditable. Простым append не получается, так как оно соотвественно добавляет в конец текста этот смайл. Хочу сделать "правильное" добавление по курсору. Например в средину текста поставил курсор, нажал добавить смайлик, и его именно в ту область и добавило.

Пробовал через getRangeAt, но столкнулся с проблемой. Да, смайл ставить по курсору .. но если нажать вне блока куда нужно добавить смайл, то он добавляется везде )) по всем блокам .. куда тыцнешь, туда и добавляется.

Как сделать так, чтобы по курсору добавлялось исключительно в нужный мне div.
Помогите пожалуйста разобраться. Сейчас это у меня работает вот так:

function smile_paste(replacementNode, container){
    let range = window.getSelection().getRangeAt(0);
    let node = document.createElement("img");
    node.classList.add('smileAppended');
    node.src = replacementNode;
    if (!range.startContainer.parentElement.closest(container)) {
        $(container).focus();
    }
    range.deleteContents();
    range.insertNode(node);
    $(container).focus();
    range.collapse();
}

Да, смайлы влетают картинками. Не unicode. Такое решение обусловлено тем, что смайлики все "своего производства")

Answer 1

[Boris Köln]

если нажать вне блока куда нужно добавить смайл, то он добавляется везде

Капитан Очевидность подсказывает, что перед вставкой надо проверить contenteditable

Comments

[Алексей Черток]

в смысле проверить ?

[Boris Köln]

https://www.w3schools.com/js/js_if_else.asp

[Алексей Черток]

серьезно !?))) спасибо что за дурачка держишь