Emoji One Area
Emojione-area is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG-like editor with ability to use Emojione emojis. The end result is a secure text/plain in which the image emojis will be replaced with their Unicode analogues or shortnames (depending on options).
Demo
From:
To:
Code:
<div class="row"> <div class="col-6"> <p>From:</p> <textarea id="demo1"> Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬. </textarea> </div> <div class="col-6"> <p>To:</p> <div id="container"></div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#demo1").emojioneArea({ container: "#container", hideSource: false, }); }); </script>
Installation
The preferred way to install is via bower
, npm
or Composer
.
Using Bower:
bower install emojionearea
Using npm:
npm install emojionearea
Using Composer:
composer require mervick/emojionearea
Also you can download source files directly from Github.
Options
Customize emojione version
// version by default is 1.5.2 window.emojioneVersion = "2.1.1";
Default options
var default_options = { template : "<editor/><filters/><tabs/>", // plugin template dir : "ltr", // direction http://www.w3schools.com/tags/att_global_dir.asp spellcheck : false, // spellcheck http://www.w3schools.com/tags/att_global_spellcheck.asp autocomplete : "off", // autocomplete http://www.w3schools.com/tags/att_input_autocomplete.asp autocorrect : "off", // autocorrect https://davidwalsh.name/disable-autocorrect autocapitalize : "off", // autocapitalize http://www.w3schools.com/tags/att_input_autocomplete.asp placeholder : null, // placeholder container : null, // by default, emojionearea container created directly under source, // in this option you can specify custom {jQuery|selector} container hideSource : true, // hide source element after binding autoHideFilters : false, // auto hide filters panel useSprite : true, // use sprite instead of images, is awesome, but not works in old browsers shortnames : false, // if true - will converts emojis to short names, // by default converts emojis to unicode characters filters: { // customize filters & emoji buttons // see in source file }, events: { // events handlers // see events below } };
Api
.on(events, handler); // - events // Type: String // One or more space-separated event types and optional namespaces // - handler // Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] ) // A function to execute when the event is triggered. .off(events[, handler]); // - events // Type: String // One or more space-separated event types and optional namespaces // - handler // Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] ) // A handler function previously attached for the event(s) // built-in events: // "mousedown", "mouseup", "click", "keyup", "keydown", // "filter.click", "emojibtn.click", "arrowLeft.click", "arrowRight.click", // "focus", "blur", "paste", "resize", "change" .setText(str); // - str // Type: String // Set text .getText(); // Get text // Usage methods, example: var el = $("selector").emojioneArea(); el[0].emojioneArea.on("emojibtn.click", function(btn) { console.log(btn.html()); });
Events
Two ways to set events, in options:
$("selector").emojioneArea({ events: { /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ focus: function (editor, event) { console.log('event:focus'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ blur: function (editor, event) { console.log('event:blur'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ mousedown: function (editor, event) { console.log('event:mousedown'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ mouseup: function (editor, event) { console.log('event:mouseup'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ click: function (editor, event) { console.log('event:click'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ keyup: function (editor, event) { console.log('event:keyup'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ keydown: function (editor, event) { console.log('event:keydown'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ keypress: function (editor, event) { console.log('event:keypress'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ paste: function (editor, event) { console.log('event:paste'); }, /** * @param {jQuery} editor EmojioneArea input * @param {Event} event jQuery Event object */ change: function (editor, event) { console.log('event:change'); }, /** * @param {jQuery} filter EmojioneArea filter * @param {Event} event jQuery Event object */ filter_click: function (filter, event) { console.log('event:filter.click, filter=' + filter.data("filter")); }, /** * @param {jQuery} button EmojioneArea emoji button * @param {Event} event jQuery Event object */ emojibtn_click: function (button, event) { console.log('event:emojibtn.click, emoji=' + button.children().data("name")); }, /** * @param {jQuery} button EmojioneArea left arrow button * @param {Event} event jQuery Event object */ arrowLeft_click: function (button, event) { console.log('event:arrowLeft.click'); }, /** * @param {jQuery} button EmojioneArea right arrow button * @param {Event} event jQuery Event object */ arrowRight_click: function (button, event) { console.log('event:arrowRight.click'); } } });
or by .on()
& .off()
methods:
var el = $("selector").emojioneArea(); // attach event handler el[0].emojioneArea.on("emojibtn.click", function(button, event) { console.log('event:emojibtn.click, emoji=' + button.children().data("name")); }); // unset all handlers attached to event el[0].emojioneArea.off("emojibtn.click"); // like in jQuery you can specify few events separated by space el[0].emojioneArea.off("focus blur"); // set & unset custom handler var eventHandler1 = function(button, event) { console.log('event1'); }; var eventHandler2 = function(button, event) { console.log('event2'); }; // attach event handlers el[0].emojioneArea.on("click", eventHandler1); el[0].emojioneArea.on("click", eventHandler2); // unset eventHandler1 el[0].emojioneArea.off("click", eventHandler1);
Events listener example
EmojioneArea Events
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
<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>
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>
Customize 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>
Requirements
License
EmojiOneArea is released under the MIT license.