JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.css">
<div class="form-group mt-5">
  <textarea name="test" class="form-control"></textarea>
</div>

<div class="logs">
</div>

CSS

.form-group, .logs {
  max-width: 500px;
  margin: 0 auto;
}

.logs {
  margin-top: 20px;
}

JavaScript

$(document).ready(() => {
  $('[name="test"]').emojioneArea({
    shortnames: true,
    saveEmojisAs: 'shortname',
    events: {
      load: () => {
        const field = $('.form-control[name="test"]')[0];
        const text = field.emojioneArea.setText('sdf:smile:');
      },
    	keyup: (editor, event) => {
        const form = event.currentTarget.closest('.form-group');
        const field = form.querySelector('.form-control[name="test"]');
        const text = field.emojioneArea.getText();
        const logContainer = document.querySelector('.logs');
        logContainer.insertAdjacentHTML('beforeend', `<div>- ${text}</div>`);
      },
    }
  });
});