WYSIWYG Emoji Converter Picker Plugin For jQuery EmojiOne Area - Download WYSIWYG Emoji Converter / Picker Plugin For jQuery - EmojiOne Area

Download WYSIWYG Emoji Converter / Picker Plugin For jQuery – EmojiOne Area

By Posted on

This time I will share jQuery Plugin and tutorial about WYSIWYG Emoji Converter / Picker Plugin For jQuery – EmojiOne Area, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <link href="/path/to/emojione.sprites.css" rel="stylesheet">
2 <link href="/path/to/emojione.min.css" rel="stylesheet">
3 ...
4 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
5 <script src="/path/to/emojione.min.js"></script>

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

view source
1 <link href="css/emojionearea.css" rel="stylesheet">
2 ...
3 <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.

view source
1 $("#container").emojioneArea({
2   hideSource: false,
3 });

4. Default plugin options.

view source
01 attributes: {
02   dir               : "ltr",
03   spellcheck        : false,
04   autocomplete      : "off",
05   autocorrect       : "off",
06   autocapitalize    : "off",
07 },
08 placeholder       : null,
09 emojiPlaceholder  : ":smiley:",
10 container         : null,
11 hideSource        : true,
12 shortnames        : true,
13 sprite            : true,
14 pickerPosition    : "top", // top | bottom | right
15 filtersPosition   : "top", // top | bottom
16 hidePickerOnBlur  : true,
17 buttonTitle       : "Use the TAB key to insert emoji faster",
18 tones             : true,
19 tonesStyle        : "bullet", // bullet | radio | square | checkbox
20 inline            : null, // null - auto
21 saveEmojisAs      : "unicode", // unicode | shortname | image
22 shortcuts         : true,
23 autocomplete      : true,
24 autocompleteTones : false,
25 standalone        : false,
26 useInternalCDN    : true, // Use the self loading mechanism
27 imageType         : "png", // Default image type used by internal CDN
28 recentEmojis      : true,

5. Events.

view source
1 // events: One or more space-separated event types and optional namespaces
2 // handler: Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] )
3  
4 // A function to execute when the event is triggered.
5 .on(events, handler);
6  
7 // A handler function previously attached for the event(s)
8 .off(events[, handler]);

6. Public methods.

view source
01 // built-in methods:
02 // "mousedown", "mouseup", "click", "keyup", "keydown",
03 // "filter.click", "emojibtn.click", "arrowLeft.click", "arrowRight.click",
04 // "focus", "blur", "paste", "resize", "change"
05  
06 // Set text
07 .setText(str);
08  
09 // Get text
10 .getText();
11  
12 // Usage methods, example:
13 var el = $("selector").emojioneArea();
14 el[0].emojioneArea.on("emojibtn.click", function(btn) {
15   console.log(btn.html());
16 });

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

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.

source : jquery.net

Related posts: