WYSIWYG Emoji Converter / Picker Plugin For jQuery - EmojiOne Area

EmojiOne Area is a jQuery plugin for converting any html element into a simple WYSIWYG editor that supports emojis based on Emojione icons.

Features:

• Auto converts characters into emoji icons.
• Appends an emoji picker to the the editor.
• Custom template.

Basic usage:

1. Include jQuery library and Emojione's files on the web page.

<link href="/path/to/emojione.sprites.css" rel="stylesheet">
<link href="/path/to/emojione.min.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/emojione.min.js"></script>

2. Include the jQuery EmojiOne Area plugin at the bottom of the web page.

<link href="css/emojionearea.css" rel="stylesheet">
...
<script src="js/emojionearea.js"></script>

3. Initialize the plugin on the target html element to generate a simple WYSIWYG editor with an emoji picker.

$("#container").emojioneArea({
  hideSource: false,
});

4. Default plugin options.

attributes: {
  dir               : "ltr",
  spellcheck        : false,
  autocomplete      : "off",
  autocorrect       : "off",
  autocapitalize    : "off",
},
placeholder       : null,
emojiPlaceholder  : ":smiley:",
container         : null,
hideSource        : true,
shortnames        : true,
sprite            : true,
pickerPosition    : "top", // top | bottom | right
filtersPosition   : "top", // top | bottom
hidePickerOnBlur  : true,
buttonTitle       : "Use the TAB key to insert emoji faster",
tones             : true,
tonesStyle        : "bullet", // bullet | radio | square | checkbox
inline            : null, // null - auto
saveEmojisAs      : "unicode", // unicode | shortname | image
shortcuts         : true,
autocomplete      : true,
autocompleteTones : false,
standalone        : false,
useInternalCDN    : true, // Use the self loading mechanism
imageType         : "png", // Default image type used by internal CDN
recentEmojis      : true,

5. Events.

// events: 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.
.on(events, handler); 

// A handler function previously attached for the event(s)
.off(events[, handler]);

6. Public methods.

// built-in methods:
// "mousedown", "mouseup", "click", "keyup", "keydown",
// "filter.click", "emojibtn.click", "arrowLeft.click", "arrowRight.click",
// "focus", "blur", "paste", "resize", "change"

// Set text
.setText(str); 

// Get text
.getText(); 

// Usage methods, example:
var el = $("selector").emojioneArea();
el[0].emojioneArea.on("emojibtn.click", function(btn) {
  console.log(btn.html());
});

Change logs:

2018-04-07

• Removed repeated emojis from defaultOptions.of version 3 of emojione. It was rearranged some emoji to make more sense, from wrong categories, etc.

2018-02-10

• v3.4.1: visible emojis out of sync once search term is cleared

2018-01-18

• v3.3.1: Fixed search.

2017-11-11

• v3.2.6: update

2017-11-10

• v3.2.5: replace h1 category titles with divs

2017-11-07

• Fix issue where emojis aren't displayed after changing tone and removing search term.

2017-11-02

• Keep search consistent between tones

2017-10-30

• Fix `TypeError: emojione is undefined`

2017-09-27

• v3.2.0

2017-09-11

• Adding support to emojione 3. Adding new emojis of version 3 to picker.

2017-07-24

• Add enable and disable functions to emojioneArea prototype.

2016-09-18

• Fix lazy load

2016-09-08

• Fix select filter for skinnable tabs

2016-09-06

• Fixed IE Paste.

2016-09-04

• Fix emojibtn.click for recent, optimization, fix standalone stylesheets

2016-08-03

• Prevent textcomplete from triggering when writing normal colons

2016-07-26

• Added an Option for disabling recent emojis

2016-06-05

• Fixed: user events attached after plugin

2016-06-01

• add placeholder functionality, some documentation and style

2016-05-18

• Added ability to use trigger method without extra params

2016-05-09

• Fixed the dynamic position picker

2016-05-06

• Fixed picker position options

2016-04-30

• Fixed: submitting while clicking on skin buttons

2016-04-28

• v3.0.0

2016-03-24

• Ability to set events in options

2016-03-19

• Build v2.0.0

2016-03-14

• Removed uppercase method to make css classes for sprites work and minified the file

2015-10-14

• Optimization, fixed some errors

2015-10-06

• Optimization, adaptation to work with bootstrap framework

 

---

This awesome jQuery plugin is developed by mervick. For more Advanced Usages, please check the demo page or visit the official website.