WYSIWYG Emoji Converter / Picker Plugin For jQuery - EmojiOne Area

WYSIWYG Emoji Converter / Picker Plugin For jQuery - EmojiOne Area
File Size: 120 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

2017-11-11

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.