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>