JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css">
<div id="real-emojionearea"></div>

<div class="emojionearea emojionearea-standalone fake-emojionearea">
  <div class="emojionearea-editor has-placeholder"><img class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f603.png"></div>
  <div class="emojionearea-button">
    <div class="emojionearea-button-open"></div>
  </div>
</div>

<div class="emojionearea emojionearea-standalone fake-emojionearea">
  <div class="emojionearea-editor has-placeholder"><img class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f603.png"></div>
  <div class="emojionearea-button">
    <div class="emojionearea-button-open"></div>
  </div>
</div>

<div class="emojionearea emojionearea-standalone fake-emojionearea">
  <div class="emojionearea-editor has-placeholder"><img class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f603.png"></div>
  <div class="emojionearea-button">
    <div class="emojionearea-button-open"></div>
  </div>
</div>

<div class="emojionearea emojionearea-standalone fake-emojionearea">
  <div class="emojionearea-editor has-placeholder"><img class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f603.png"></div>
  <div class="emojionearea-button">
    <div class="emojionearea-button-open"></div>
  </div>
</div>

<div class="emojionearea emojionearea-standalone fake-emojionearea">
  <div class="emojionearea-editor has-placeholder"><img class="emojioneemoji" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f603.png"></div>
  <div class="emojionearea-button">
    <div class="emojionearea-button-open"></div>
  </div>
</div>

JavaScript

var picker;

$("#real-emojionearea").emojioneArea({
  standalone: true,
  autocomplete: false,
  pickerPosition: 'right',
  filters: {
    recent: false
  },
  events: {
  	ready: function() {
      picker = {
				api: this,
        wrapper: this.editor.parent().hide()
      };
    },
  	picker_hide: function() {
    	picker.wrapper.hide();
      picker.element.show();
  		picker.editor.html(picker.api.editor.html()).attr("class", picker.api.editor.attr("class"));
      picker.element.attr("data-value", this.getText());
    }
  }
});

$(".fake-emojionearea").on("click", function() {
  picker.element = $(this);
  picker.editor = picker.element.children(".emojionearea-editor");
  picker.element.hide().before(picker.wrapper.show());
  picker.api.editor.html(picker.editor.html()).attr("class", picker.editor.attr("class"));
  picker.api.showPicker();
});