Emoticons — where to start?

Hi all. Question is: is pop-up window implemented using fancybox and inside this window there is a field for sending messages in this field there is an icon hovering over which we have the unit with smiles and, accordingly, when you click the smiley is added in the message field. That's the way it should be: 624d44e1628342ecad45b9e5343cc845.jpg

Pliz tell me how can implement it? There's a plugin or hands (as)? I would appreciate your advice :) thanks in Advance!
July 2nd 19 at 17:31
3 answers
July 2nd 19 at 17:33
The most primitive way is to insert the relevant javascripta Img src on click on the smiley. src can be written in date attribte smileys for example
July 2nd 19 at 17:35
Any plug-ins. The input field is usually done in tag div with attribute contenteditable="true"that you'd be able to write text with the keyboard and see the inserted images!

Looks like this:
<div class="fieldMessage" contenteditable="true"></div>


When you click on the smiley to add it to this field.

Looks like this:
$('.smile').on('click', function(){
// Assumes that .smile - it's picture
$('.fieldMessage').append($(this));
});


Written of course on the knee, to demonstrate logic, but this is a superficial vision of how and what you have done is not clear to me!

When sending:
If you submit the form through ajax you need to simply get the contents div'a string and send it to the server.

If the form is sent as the default page refresh, you need to create a hidden field in the form and to duplicate all that is written in this divas a string
And when will be XSS - blake_Eichma commented on July 2nd 19 at 17:38
way right - it is impossible to send Ajax HTML - ned.Frami22 commented on July 2nd 19 at 17:41
Need to send codes as emoji. This can be for example :-) or [[happy]] or anything else. - ned.Frami22 commented on July 2nd 19 at 17:44
: well, many prefer :code: - blake_Eichma commented on July 2nd 19 at 17:47
: no, you can. Just to prevent XSS then tricky at times - blake_Eichma commented on July 2nd 19 at 17:50
July 2nd 19 at 17:37
Thank you all for the advice.
Still used the plug-in, protest, kind of completely shut down your question.
Can someone come in handy)
https://github.com/mervick/emojionearea

Find more questions by tags CSSjQuery