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>