Examples
Auto hide filters:
<textarea id="example1">
Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
</textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#example1").emojioneArea({
autoHideFilters: true
});
});
</script>
Using div:
Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
<div id="example2">
Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#example2").emojioneArea();
});
</script>
Using input:
<input id="example3" value="Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.">
<script type="text/javascript">
$(document).ready(function() {
$("#example3").emojioneArea();
});
</script>
Using images instead of the sprite:
<textarea id="example4">
Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
</textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#example3").emojioneArea({
useSprite: false
});
});
</script>
Change layout:
<textarea id="example5">
Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
</textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#example5").emojioneArea({
template: "<filters/><tabs/><editor/>"
});
});
</script>