BarnyBroken
@BarnyBroken
Дизайнер, веб-разработчик.

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

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

Мне нужно вставлять смайлики в 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. Такое решение обусловлено тем, что смайлики все "своего производства")
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 1
@BorisKorobkov
Web developer
если нажать вне блока куда нужно добавить смайл, то он добавляется везде

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы