JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css">

    <textarea id="emojionearea1"></textarea>

CSS

* {
  font-family: Arial, Helvetica, san-serif;
}

JavaScript

$(document).ready(function() {
	$("#emojionearea1").emojioneArea({
  	pickerPosition: "top",
                    tonesStyle: "bullet",
                    hidePickerOnBlur: true,
                    saveEmojisAs:'unicode',
                    tones:false,
                    placeholder: "Este texto esta transparente en el css",
                    buttonTitle: "Usa la tecla TAB para insertar emojis rápidamente",
                    search: false,

                        events: {
                        keypress: function (editor, event) {

                            if (event.keyCode == 13 ) {
                                if (event.shiftKey) {

                                }else{
                                    event.preventDefault();
                                    var msg = this.getText();                         
                                    editor.html('');
                                    msg=msg.trim();
                                    if(msg.trim().length != 0){

                                     console.log('data sent');

                                        this.hidePicker();


                                    }
                         
                                }

                            }

                        }
                    }
  });

});