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>