Эмоции.js

В статье описывается опыт создания текстового поля с возможностью вставки смайлов, проблемы которые мне встретились и их решения, а так же ссылка на репозиторий с готовым jQuery плагином. Если вам интересно, прошу под кат.

Во время разработки моего первого проекта мне поставили задачу, создать чат со смайлами. Основной функционал чата был готов, но приступив к смайлам у меня возникла проблема, я не мог вставить смайл в текущую позицию курсора, получалось только в начало или конец текстового поля. Опыта у меня было ноль, как в программировании так и в поиске нужной информации, поэтому не смог найти ничего «работоспособного» и тем более готовых решений. Помучавшись две-три недели я сдался и пришлось сказать ненавистные мне слова «Я не могу это реализовать».

Прошло уже около трех лет и недавно у моего коллеги встала та же задача, он спросил меня, как это можно сделать. Воспоминания о неудаче вдруг хлынули волной и мне захотелось решить мою давнюю неосуществимую задачу.

Поиски готового решения снова закончились безрезультатно, но с документацией было уже намного лучше, узнав о document.getSelection() тут же кинулся писать код и конечно же встретил еще несколько проблем и как всегда на одну из них ушло больше всего времени.

Нашел примерно такое решение

if (window.getSelection) {     var sel = window.getSelection();     if (sel.getRangeAt && sel.rangeCount) {         var range = window.getSelection().getRangeAt(0);         range.insertNode(document.createTextNode(text));     } } 

Что было очевидно, при клике на смайл фокус переходил к нему и нужный нам контент вставлялся в него, а не в наше текстовое поле. Решение было простым, запретить фокусироваться на блоке с эмоциями.

$emojiContainer.attr({   unselectable: 'on',        onselectstart: 'return false;',        onmousedown: 'return false;' }); 

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

После прочтения замечательной статьи от bur все немного прояснилось.
Написал функцию которая вставляет курсор после элемента, решение оказалось простым.

function SetCursorAfterElement(element) {     var selection = window.getSelection();     selection.removeAllRanges();     var range = document.createRange();     range.setStartAfter(element);     selection.addRange(range); } 

На данный момент это jQuery плагин и поддерживается браузерами IE9+. В ближайших планах переписать код без использованием jQuery и с поддержкой старых браузеров, да и код написан не продумано, без особой гибкости. Буду рад если кому то сэкономил время.

KEmoji.js