CODEWITHSUNDEEP
javascriptjqueryemojiemojione
Ajay Krishna Dutta
Ajay Krishna Dutta

Reputation: 770

Display emoji in a div using Emoji One Area

I am working with Emoji One Area emoji picker. please check the fiddle : https://jsfiddle.net/ukLaz8cm/40/

Its working fine.But in case of some emoji like Punch Tone1 and some other are not display properly on the display div & got some box type symbol.how to display them properly. 

<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
</div>
<button id="click">preview</button>
<div id="display">
</div>

$(document).ready(function() {
    $("#emojionearea1").emojioneArea({

        pickerPosition: "right",
        tonesStyle: "bullet",

    });
});

$("#click").click(function(){
text =  $("#emojionearea1").val();
//alert(text);
$("#display").html(text);
})

Upvotes: 0

Views: 4890

Answers (1)

Ameer Hamza
Ameer Hamza

Reputation: 108

emojionearea using emojione

So you can use emojione helper function toImage to convert unicode characters (emoticons) and shortname (e.g :smile:) as follows:

HTML:

<div class="hasEmoji">Text here 😁 Text here </div>

Javascript:

jQuery(".hasEmoji").each(function(){
    var preview = emojione.toImage(jQuery(this).html());
    jQuery(this).html(preview);
});

Here is modified your jsfiddle snippet:

https://jsfiddle.net/ukLaz8cm/96/

Upvotes: 2

Related Questions