JSFiddle - React, Tailwind, and code Playground
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.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="input-group" id="form" >
<input class="form-control" type="text" maxlength="10" id="mensagem" name="mensagem" placeholder="Digite...">
<input id="id_user" name="id_user" type="hidden" value="<?php echo $id; ?>">
<div class="input-group-btn">
<button class="btn btn-success" id="BotaoId" onclick="AlteraConteudo()"><i class="fa fa-plus"></i></button>
</div>
</form>
CSS
* {
font-family: Arial, Helvetica, san-serif;
}
.emojionearea {
width: 90%;
}
.emojionearea .emojionearea-editor {
min-height: 1em;
}
.btn btn-success {
width: 1%;
display: block;
}
JavaScript
window.AlteraConteudo = function() {
var text = $('#mensagem').data("emojioneArea").getText();
console.log('AlteraConteudo.text = ', text);
// Variável com os dados que serão enviados ao PHP
var dados = "mensagem=" + text;
ajax.open("GET", "retorna_informacoes.php?" + dados, false);
ajax.setRequestHeader("Content-Type", "text/html");
ajax.send();
$('#mensagem').data("emojioneArea").setText('');
}
$(document).ready(function() {
$("#mensagem").emojioneArea({
inline: false,
events: {
keypress: function (editor, event) {
if (event.which == 13) {
event.preventDefault();
// I need to run the function
AlteraConteudo();
}
}
}
});
});