EmojiPicker - by LaCodon

Demo

Enter a text underneath this paragraph and add some Emojis to see what output the EmojiPicker() class gives.

Result of getValue()

Updates only while typing text, not by clicking an emoji.

Result of render()

As HTML again

How to use EmojiPicker.js

EmojiPicker.js does not require jQuery!

Minimal

Store emojis, for example as *.png files, in the /emojis/ folder

⎮- index.html
⎮- EmojiPicker.js
⎮- EmojiPicker.css
⎮- emojis/
     ⎮- bowtie.png
     ⎮- smile.png
     ⎮- laughing.png
     ⎮- blush.png
     ⎮- smiley.png

Include CSS an JavaScript files.

<script src="EmojiPicker.js"></script>
<link rel="stylesheet" type="text/css" href="EmojiPicker.css">

Add the following JavaScript Code to your index.html

function initEmojiPicker() {
     EmojiPickerSettings.path = 'emojis/';
     EmojiPickerSettings.icons = {'bowtie': 'bowtie.png',
          'smile': 'smile.png',
          'laughing': 'laughing.png',
          'blush': 'blush.png',
          'smiley': 'smiley.png'};

     var ep = new EmojiPicker();
}

And the following HTML body tag

<body onload="initEmojiPicker()">
     <div id="emojiArea"></div>
</body>

Advanced

Including emojis

Save all emojis in a folder and add each one with a shortcut code and it's filename to EmojiPickerSettings.icons as seen in Minimal section in the following format:

{'shortcut': 'filename.png'};

You can also copy the /emojis/ folder from the source and include this JavaScript Snippet after including EmojiPicker.js in your HTML.

The last step you have to do is to tell EmojiPicker.js where to find the the emoji images. To do so, replace path/to/png/ with yours.

EmojiPickerSettings.path = 'path/to/png/';
Sometimes it's necessary to also set EmojiPickerSettings.renderPath. For example if you store your JavaScript files in a /js/ folder.
EmojiPickerSettings.path = '../path/to/png/';
EmojiPickerSettings.renderPath = 'path/to/png/';

Determine WYSIWYG div

The div which to use as the editor needs the id emojiArea

<div id="emojiArea"></div>

You can either use the original CSS file or create an own one. The following list shows each element and it's selector.

If you face a selector issue because your page already uses the selectors of EmojiPicker.js, you can set a prefix:
EmojiPickerSettings.prefix = 'yourPrefix_';

Don't forget to add the prefix in your CSS!

EmojiPicker.js always requires this CSS:

.visible { display: block; }
.hidden { display: none; }