Смайлы — с чего начинать?

Question

[buzzloud]

Привет всем. Такой вопрос: есть pop-up окно - реализовано через fancybox, внутри этого окна есть поле для отправки сообщения и в этом поле есть иконка при наведении на которую у нас появляется блок со смайлами и, соответственно, при клике смайлик добавляется в поле сообщения. Вот так это должно быть:

Подскажите плиз, как можно реализовать это? Плагин есть какой или руками (как)? Буду признателен за совет :) Заранее спасибо!

Answer 1

[_ umr]

Самый примитивный способ это вставлять жаваскриптом Img с соответствующим src по клик на смайле. src можно прописать в дата аттрибтах смайлов например

Answer 2

[Дима Паутов]

Никаких плагинов. Поле ввода делается обычным тегом div с атрибутом contenteditable="true", что бы в него можно было писать текст с клавиатуры, а так же видеть вставленные в него картинки!

Выглядит так:

<div class="fieldMessage" contenteditable="true"></div>

При клике на смайлик добавлять его в это поле.

Выглядит так:

$('.smile').on('click', function(){
// Предпологается, что .smile - это картинка
$('.fieldMessage').append($(this));
});

Написано конечно на коленке, для демонстрации логики, но это поверхностное видение, как и что у вас сделано мне не ясно!

При отправке:
Если вы отправляете форму через ajax - то достаточно просто получить содержимое div'a в виде строки и отправить на сервер.

Если форма отправляется как по умолчанию, с обновлением страницы, то вам нужно создать скрытое поле в форме и туда дублировать всё написанное в этот div, тоже в виде строки

Comments

[Dark Hole]

А пото будет XSS

[Даниил Колесниченко]

Dark Hole кстати прав - нельзя аяксом HTML слать

[Даниил Колесниченко]

Надо отправлять в виде кодов, как emoji. Это может быть например :-) или [[happy]] или что-нибудь ещё.

[Dark Hole]

Даниил Колесниченко: ну, многие предпочитают :code:

[Dark Hole]

Даниил Колесниченко: не, можно. Просто предовратить XSS тогда сложнее в разы

Answer 3

[buzzloud]

Всем спасибо за советы.
Все-таки воспользовался плагином, протестил, вроде полностью закрыл свой вопрос.
Может кому пригодится)
https://github.com/mervick/emojionearea