PHPackages                             mervick/emojionearea - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mervick/emojionearea

ActivePlugin[Utility & Helpers](/categories/utility)

mervick/emojionearea
====================

WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

v3.4.2(7y ago)940219.3k↓23.2%255[115 issues](https://github.com/mervick/emojionearea/issues)[1 PRs](https://github.com/mervick/emojionearea/pulls)2MITJavaScript

Since Sep 27Pushed 3y ago39 watchersCompare

[ Source](https://github.com/mervick/emojionearea)[ Packagist](https://packagist.org/packages/mervick/emojionearea)[ RSS](/packages/mervick-emojionearea/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (10)DependenciesVersions (50)Used By (2)

[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://stand-with-ukraine.pp.ua/)

EmojioneArea
============

[](#emojionearea)

EmojioneArea is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG editor with ability to use Emojione icons.
The end result is a secure text/plain in which the image icons will be replaced with their Unicode analogues.

### Preview version 3.x

[](#preview-version-3x)

[![EmojioneArea version 3.0.0](https://camo.githubusercontent.com/70642fc002935b36a7a964485b32cfaa1d2ee73839d8eba52c1f7763f39ecc00/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f76332e706e67)](https://camo.githubusercontent.com/70642fc002935b36a7a964485b32cfaa1d2ee73839d8eba52c1f7763f39ecc00/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f76332e706e67)

[See the Live Demo here](https://jsfiddle.net/1v03Lqnu/)

[Version 2.1.x](https://github.com/mervick/emojionearea/tree/v2.1.x)

Installation
------------

[](#installation)

The preferred way to install is via [bower](http://bower.io/), [npm](https://www.npmjs.com/) or [composer](https://getcomposer.org/).

```
bower install emojionearea#^3.0.0
# or
npm install emojionearea@^3.0.0
# or
composer require mervick/emojionearea ^3.0.0
```

Usage
-----

[](#usage)

Add the following lines to the `head`:

```

```

Simple usage:

```

  $(document).ready(function() {
    $("#example1").emojioneArea();
  });

```

EmojioneArea uses awesome [Emojione](https://github.com/emojione/emojione) emojis.
So when `emojionearea.js` loads, it's require to `emojione.js` loaded too, but if it not loaded in the page then EmojioneArea loads it from CDN.
For avoiding this behavior you can add `emojione.js` and `emojione.css` into your page.

### Customize emojione version

[](#customize-emojione-version)

By changing value below you can change emojione version which will be loaded from CDN

```
window.emojioneVersion = "3.1.2";
```

Options
-------

[](#options)

#### `standalone`

[](#standalone)

Standalone mode

**type**: `boolean`
**default**: `false`

Example:

```
$(".emojionearea").emojioneArea({
    standalone: true
});
```

Preview:

[![EmojiOneArea - Standalone mode](https://camo.githubusercontent.com/86597d36df09180602c1ff30883c71fc9b693f5edc677d548ca4aa65925bedf3/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f7374616e64616c6f6e655f76332e706e67)](https://camo.githubusercontent.com/86597d36df09180602c1ff30883c71fc9b693f5edc677d548ca4aa65925bedf3/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f7374616e64616c6f6e655f76332e706e67)

#### `emojiPlaceholder`

[](#emojiplaceholder)

The placeholder (default emoji) of the button in the standalone mode.
Works only with standalone mode

**type**: `string`
**default**: `':smiley:'`
**accepts values**: \[any emojione shortname\]

Example:

```
$(".emojionearea").emojioneArea({
    emojiPlaceholder: ":smile_cat:"
});
```

#### `placeholder`

[](#placeholder)

The placeholder of the editor

**type**: `string`
**default**: \[uses placeholder attribute from the source input\]

Example:

```
$(".emojionearea").emojioneArea({
    placeholder: "Type something here"
});
```

#### `search`

[](#search)

Whether is enabled search emojis in the picker

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    search: false
});
```

#### `searchPlaceholder`

[](#searchplaceholder)

The search placeholder

**type**: `string`
**default**: `'SEARCH'`

Example:

```
$(".emojionearea").emojioneArea({
    searchPlaceholder: "Search"
});
```

#### `useInternalCDN`

[](#useinternalcdn)

Whether to use the loading mechanism to load EmojiOne from CDN

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    useInternalCDN: true
});
```

#### `buttonTitle`

[](#buttontitle)

The title of the emoji button (hint on the hover)

**type**: `string`
**default**: `"Use the TAB key to insert emoji faster"`

Example:

```
$(".emojionearea").emojioneArea({
    buttonTitle: "Use the TAB key to insert emoji faster"
});
```

#### `recentEmojis`

[](#recentemojis)

Whether to show recently selected emojis in the picker

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    recentEmojis: false
});
```

#### `pickerPosition`

[](#pickerposition)

The position of the emojis picker in the relation to the editor

**type**: `string`
**default**: `'top'`
**accepts values**: `'top' | 'right' | 'bottom'`

Example:

```
$(".emojionearea").emojioneArea({
    pickerPosition: "bottom"
});
```

#### `filtersPosition`

[](#filtersposition)

The position of the filters header in the emojis picker

**type**: `string`
**default**: `'top'`
**accepts values**: `'top' | 'bottom'`

Example:

```
$(".emojionearea").emojioneArea({
    filtersPosition: "bottom"
});
```

[![EmojiOneArea - searchPosition bottom](https://camo.githubusercontent.com/686ad4cd09c3ba8a6ed0d3a0e9acdc662b51bd97bf17b3418ae7f1532c38945e/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f66696c746572732d706f736974696f6e2d626f74746f6d2e706e673f31)](https://camo.githubusercontent.com/686ad4cd09c3ba8a6ed0d3a0e9acdc662b51bd97bf17b3418ae7f1532c38945e/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f66696c746572732d706f736974696f6e2d626f74746f6d2e706e673f31)

#### `searchPosition`

[](#searchposition)

The search panel position if `search` option enabled

**type** `string`
**default**: `top`
**accepts**: `'top' | 'bottom'`

Example:

```
$(".emojionearea").emojioneArea({
    searchPosition: "bottom"
});
```

[![EmojiOneArea - searchPosition bottom](https://camo.githubusercontent.com/51709a9090418e6d4db834a14ff610e73f247502dd9e3c7d8874a2ac7c9c2ca2/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f7365617263682d706f736974696f6e2d626f74746f6d2e706e673f21)](https://camo.githubusercontent.com/51709a9090418e6d4db834a14ff610e73f247502dd9e3c7d8874a2ac7c9c2ca2/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f7365617263682d706f736974696f6e2d626f74746f6d2e706e673f21)

#### `hidePickerOnBlur`

[](#hidepickeronblur)

Whether to hide picker when blur event triggers

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    hidePickerOnBlur: false
});
```

#### `container`

[](#container)

The container of the plugin.

By default, emojionearea container created directly under the source.
In this option you can specify custom `jQuery|selector` container.

**type**: `jQuery|selector`
**default**: `null`

Examples:

```

    $("#emojionearea1").emojioneArea({
        container: "#container2" // by selector
    });
    $("#emojionearea2").emojioneArea({
        container: $("#container1") // by jQuery object
    });

```

#### `tones`

[](#tones)

Whether to show the skin tone buttons in the emoji picker

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    tones: false
});
```

#### `tonesStyle`

[](#tonesstyle)

The style of the skin tones selector

**type**: `string`
**default**: `'bullet'`
**accepts values**: `'bullet' | 'radio' | 'square' | 'checkbox'`

Example:

```
$(".emojionearea").emojioneArea({
    tonesStyle: 'checkbox'
});
```

#### `shortnames`

[](#shortnames)

By default EmojioneArea parses only utf8 emojis (e.g. `😀😊😍🤑😜🤓`) from the value of the input source.
This option enables to parse also the shortnames (e.g. `:smile:`, `:smiley:`, `:cat:`, etc).
Also affects the work of the method `setText()`.

Note. Affects only to how it parse emojis.
To change how it saves emojis use `saveEmojisAs` option (see below).

**type**: `boolean`
**default**: `false`

Example:

```
$(".emojionearea").emojioneArea({
    shortnames: true
});
```

#### `saveEmojisAs`

[](#saveemojisas)

The processor type of the how emojionearea saves icons to the source, also affects on the method `getText()`

**type**: `string`
**default**: `'unicode'`
**accepts values**: `'unicode' | 'shortname' | 'image'`

- unicode - saves emojis as utf8 text (e.g. `😀😊😍🤑😜🤓`);
- shortname - save emojis as shortnames (e.g. `:smile:`, `:smiley:`, `:cat:`, etc);
- image - save emojis as html images, example:

```

```

#### `hideSource`

[](#hidesource)

Whether to hide source input after render the plugin

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    hideSource: false
});
```

#### `inline`

[](#inline)

Inline mode
Whether to use plugin editor as inline input

**type**: `boolean|null`
**default**: `null`
**accepts values**: `null | true | false`

- `null` - auto detect, if input is textarea then `false`, when it is `input[type=text]` then `true`

Example:

```
$(".emojionearea").emojioneArea({
    inline: true
});
```

Preview:

[![EmojioneArea - inline mode](https://camo.githubusercontent.com/6af351188933869d4487a8087838dcea79312b854b2f347de89c88b127cafcf5/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f696e6c696e652e706e673f)](https://camo.githubusercontent.com/6af351188933869d4487a8087838dcea79312b854b2f347de89c88b127cafcf5/687474703a2f2f6d65727669636b2e6769746875622e696f2f656d6f6a696f6e65617265612f696d616765732f696e6c696e652e706e673f)

#### `shortcuts`

[](#shortcuts)

Whether to attach shortcuts events

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    shortcuts: false
});
```

#### `autocomplete`

[](#autocomplete)

Whether to add the emojis short names autocomplete functional

**type**: `boolean`
**default**: `true`

Example:

```
$(".emojionearea").emojioneArea({
    autocomplete: false
});
```

#### `autocompleteTones`

[](#autocompletetones)

Whether to show skin emojis in the autocomplete dropdown

**type**: `boolean`
**default**: `false`

Example:

```
$(".emojionearea").emojioneArea({
    autocompleteTones: true
});
```

#### `textcomplete`

[](#textcomplete)

The settings of the autocomplete dropdown

**type**: `object`
**default**:

```
{
    maxCount  : 15,
    placement : null
}
```

where

- `maxCount` - max count of items in the dropdown
- `placement` - the placement of the dropdown (`null | "top" | "absleft" | "absright"`)

Example:

```
$(".emojionearea").emojioneArea({
    textcomplete: {
        maxCount  : 20,
        placement : 'absleft'
    }
});
```

#### `attributes`

[](#attributes)

The html attributes of the editor (contenteditable) of the plugin

**type**: `object`
**default**:

```
{
    dir            : "ltr",
    spellcheck     : false,
    autocomplete   : "off",
    autocorrect    : "off",
    autocapitalize : "off",
}
```

where

- `dir` - direction [http://www.w3schools.com/tags/att\_global\_dir.asp](http://www.w3schools.com/tags/att_global_dir.asp)
- `spellcheck` - spellcheck [http://www.w3schools.com/tags/att\_global\_spellcheck.asp](http://www.w3schools.com/tags/att_global_spellcheck.asp)
- `autocomplete` - autocomplete [http://www.w3schools.com/tags/att\_input\_autocomplete.asp](http://www.w3schools.com/tags/att_input_autocomplete.asp)
- `autocorrect` - autocorrect
- `autocapitalize`- autocapitalize [http://www.w3schools.com/tags/att\_input\_autocomplete.asp](http://www.w3schools.com/tags/att_input_autocomplete.asp)

Example:

```
$(".emojionearea").emojioneArea({
    attributes: {
        spellcheck : true,
        autocomplete   : "on",
    }
});
```

#### `filters`

[](#filters)

The filters (tabs) in the emojis picker

**type**: `object`
**default**: \[the full default filters you can find here [here](https://github.com/mervick/emojionearea/blob/master/src/function/getDefaultOptions.js#L55)\]

```
{
    tones: { // this tab is hidden, and used for list tones emojis
        title: "Diversity",
        emoji: "[...]", // list of the emojis, see source code
    },
    recent: {
        icon: "clock3",
        title: "Recent",
    },
    smileys_people: {
        icon: "yum",
        title: "Smileys & People",
        emoji: "[...]", // list of the emojis, see source code
    },
    animals_nature: {
        icon: "hamster",
        title: "Animals & Nature",
        emoji: "[...]", // list of the emojis, see source code
    },
    food_drink: {
        icon: "pizza",
        title: "Food & Drink",
        emoji: "[...]", // list of the emojis, see source code
    },
    activity: {
        icon: "basketball",
        title: "Activity",
        emoji: "[...]", // list of the emojis, see source code
    },
    travel_places: {
        icon: "rocket",
        title: "Travel & Places",
        emoji: "[...]", // list of the emojis, see source code
    },
    objects: {
        icon: "bulb",
        title: "Objects",
        emoji: "[...]", // list of the emojis, see source code
    },
    symbols: {
        icon: "heartpulse",
        title: "Symbols",
        emoji: "[...]", // list of the emojis, see source code
    },
    flags: {
        icon: "flag_gb",
        title: "Flags",
        emoji: "[...]", // list of the emojis, see source code
    },
}
```

Example:

```
$(".emojionearea").emojioneArea({
    filters: {
        recent : false, // disable recent
        smileys_people: {
            icon: 'cat' // change smileys_people filter icon to "cat"
        },
        animals_nature: {
            title: 'Animals' // change animals_nature filter title to "Animals"
        },
        food_drink: {
            emoji: "smiley smile cat" // change emojis of the filter food_drink
        },
        objects: false, // disable objects filter
        symbols: false, // disable symbols filter
        flags : false // disable flags filter
    }
});
```

Methods
-------

[](#methods)

**List of methods**

#### `.on(events, handler)`

[](#onevents-handler)

Attach handler for event(s)

- param **events**
    Type: `String`
    One or more space-separated event types
- param **handler**
    Type: `Function(jQuery Element, Event eventObject [, any extraParameter ] [, ...])`
    A function to execute when the event is triggered
- returns `EmojioneArea` instance

#### `.off(events[, handler])`

[](#offevents-handler)

Remove previously attached handler (if handler is specified) or all handlers of specified event(s)

- param **events**
    Type: `String`One or more space-separated event types
- param **handler** \[optional\]
    Type: `Function(jQuery Element, Event eventObject [, any extraParameter ] [, ... ])`
    A handler function previously attached for the event(s) by `.on` method
- returns `EmojioneArea` instance

#### `.trigger(events[, ... ])`

[](#triggerevents--)

Trigger event(s)

- param **events**
    Type: `String`
    One or more space-separated event types
- params **\[, ...\]** \[optional\]
    Type: `any`Extra parameters
- returns `Boolean` the result of all called handlers

#### `.setText(str)`

[](#settextstr)

Set emojionearea text

- param **str**Type: `String`
    Set text
- returns `EmojioneArea` instance

#### `.getText()`

[](#gettext)

Get text of emojionearea, there is no any html, just vanilla text

- returns `String`

#### `.showPicker()`

[](#showpicker)

Show picker area

- returns `EmojioneArea` instance

#### `.hidePicker()`

[](#hidepicker)

Hide picker area

- returns `EmojioneArea` instance

#### `.enable()`

[](#enable)

Enable emojionearea input area

- returns `EmojioneArea` instance

#### `.disable()`

[](#disable)

Disable emojionearea input area

- returns `EmojioneArea` instance

#### `.setFocus()`

[](#setfocus)

Focus on emojionearea input area

- returns `EmojioneArea` instance

### Methods Usage

[](#methods-usage)

How to use methods, example:

```
  var el = $("selector").emojioneArea();
  el[0].emojioneArea.on("emojibtn.click", function(btn, event) {
    console.log(btn.html());
  });

  // OR
  $("selector2").emojioneArea();
  $("selector2")[0].emojioneArea.getText();

  // OR
  $("selector3").emojioneArea();
  $("selector3").data("emojioneArea").showPicker();
```

Events
------

[](#events)

**List of built-in events:**

#### `ready` or `onLoad`

[](#ready-or-onload)

triggers when emojionearea is initialized
Handler type: `Function` (no params)

#### `click`

[](#click)

triggers when user clicks on emojionearea input or picker
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `mousedown`

[](#mousedown)

triggers on `mousedown` of emojionearea input or picker
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `mouseup`

[](#mouseup)

triggers on `mouseup` of emojionearea input or picker
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `keyup`

[](#keyup)

triggers on `keyup` of emojionearea input or picker
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `keypress`

[](#keypress)

triggers on `keypress` of emojionearea input or picker
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `focus`

[](#focus)

triggers on `focus` of emojionearea input
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `blur`

[](#blur)

triggers on `blur` of emojionearea input
Handler type: `Function (editor: jQuery, event: Event)`

- param {jQuery} **editor** - EmojioneArea input
- param {Event} **event** - jQuery Event object

#### `paste`

[](#paste)

triggers when user has pasted content to input area
Handler type: `Function (editor: jQuery, text: String, html: String)`

- param {jQuery} **editor** - EmojioneArea input
- param {String} **text** - pasted vanilla text
- param {String} **html** - pasted html content

#### `resize`

[](#resize)

triggers when input area has resized
Handler type: `Function` (no params)

#### `change`

[](#change)

triggers when input area has changed
Handler type: `Function` (no params)

#### `emojibtn.click`

[](#emojibtnclick)

triggers when user clicks on emoji button at the picker area
Handler type: `Function (emojibtn: jQuery)`

- param {jQuery} **emojibtn** - emoji button that user has clicked

#### `button.click`

[](#buttonclick)

triggers when user clicks on show/hide button
Handler type: `Function (button: jQuery)`

- param {jQuery} **button** - show/hide button

#### `tone.click`

[](#toneclick)

triggers when user clicks on tone filter button
Handler type: `Function (button: jQuery)`

- param {jQuery} **button** - tone button that user has clicked

#### `picker.show`

[](#pickershow)

triggers on show picker
Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `picker.hide`

[](#pickerhide)

triggers when picker has been hidden
Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `picker.mousedown`

[](#pickermousedown)

triggers on `mousedown` of emojionearea picker area Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `picker.mouseup`

[](#pickermouseup)

triggers on `mouseup` of emojionearea picker area Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `picker.click`

[](#pickerclick)

triggers on `click` of emojionearea picker area Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `picker.keydown`

[](#pickerkeydown)

triggers on `keydown` of emojionearea picker area Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `picker.keypress`

[](#pickerkeypress)

triggers on `keypress` of emojionearea picker area Handler type: `Function (picker: jQuery)`

- param {jQuery} **picker** - picker area

#### `search.focus`

[](#searchfocus)

triggers on `focus` of picker search area
Handler type: `Function` (no params)

#### `search.keypress`

[](#searchkeypress)

triggers when user press key on picker search area
Handler type: `Function` (no params)

### Events Usage

[](#events-usage)

There are 2 ways to set events, directly in options via options `events`.
Note: For events with `.` (dot) you can set event name with `_`(dash) instead of `.` (dot) here.

Example, set events in the options:

```
$("selector").emojioneArea({
  events: {
    paste: function (editor, event) {
      console.log('event:paste');
    },
    change: function (editor, event) {
      console.log('event:change');
    },
    emojibtn_click: function (button, event) {
      console.log('event:emojibtn.click, emoji=' + button.children().data("name"));
    }
  }
});
```

Also you can manage events via `.on()`, `.off()` and `.trigger()` methods

Example:

```
  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);
```

Building
--------

[](#building)

Building EmojiOneArea requires grunt, compass, and sass to be available

For making changes and build project (scss/js):

```
npm update
npm run build

```

PRs welcome!!!

FAQ / Troubleshooting
---------------------

[](#faq--troubleshooting)

#### EmojiOne icons are appearing larger than expected

[](#emojione-icons-are-appearing-larger-than-expected)

Most likely caused by including some scripts in the wrong order (or perhaps not at all!) Include jQuery, then EmojiOne, then EmojiOneArea scripts

#### Can I use EmojiOneArea to just display Emoji icons in a div?

[](#can-i-use-emojionearea-to-just-display-emoji-icons-in-a-div)

EmojiOneArea is intended to be a text editor which supports EmojiOne. If you just want to display Emoji icons, the EmojiOne library already provides everything you need.

#### Can I add extra buttons into EmojiOneArea, alongside the existing emoji picker icon?

[](#can-i-add-extra-buttons-into-emojionearea-alongside-the-existing-emoji-picker-icon)

This is not fully supported, but you could respond to the jQuery onLoad event which EmojiOneArea fires once its initialised, and insert your buttons into the DOM at this point see [\#152](https://github.com/mervick/emojionearea/issues/152)

#### Firefox is not positioning the input caret correctly in EmojiOneArea

[](#firefox-is-not-positioning-the-input-caret-correctly-in-emojionearea)

This appears to be a long standing FireFox bug, apparently related to contenteditable, the placeholder attribute, and the pseudo :before or :after classes [https://bugzilla.mozilla.org/show\_bug.cgi?id=1020973](https://bugzilla.mozilla.org/show_bug.cgi?id=1020973)

There are various workarounds such as changing placeholder, or adding some padding See [\#86](https://github.com/mervick/emojionearea/issues/86)

#### Can I modify the position of EmojiOneArea picker?

[](#can-i-modify-the-position-of-emojionearea-picker)

You can use the `pickerPosition` option which provides basic control of where the picker appears, in relation to the source input. For more control, you could apply translate CSS to the picker

Known Issues
------------

[](#known-issues)

#### Internet Explorer focus issues

[](#internet-explorer-focus-issues)

IE 11 causes EmojiOneArea to hide (and trigger blur event) when the emoji picker scrollbar is clicked There is no current fix for this, although there are a few crude workarounds See [\#127](https://github.com/mervick/emojionearea/issues/127)

#### EmojiOneArea positioning

[](#emojionearea-positioning)

There are known issues with positioning the EmojiOneArea picker. It does not currently ensure the picker is entirely visible on small screen devices, or positioned properly when it is invoked from the bottom of a page (it could be clipped) See [\#131](https://github.com/mervick/emojionearea/issues/131)

#### Browser loads the textcomplete.js from CDN, everytime an EmojiOneArea is instantiated

[](#browser-loads-the-textcompletejs-from-cdn-everytime-an-emojionearea-is-instantiated)

You can avoid this by explicitly including the textcomplete script into your document. If it already exists, EmojiOneArea will use the preloaded script instead of attempting to load it from CDN for each instance You can also avoid this by disabling autocomplete entirely by setting the autocomplete option to false

Requirements
------------

[](#requirements)

- [jQuery](https://jquery.com/) >= 1.8.2

License
-------

[](#license)

EmojiOneArea is released under the MIT license.

###  Health Score

51

—

FairBetter than 95% of packages

Maintenance18

Infrequent updates — may be unmaintained

Popularity59

Moderate usage in the ecosystem

Community37

Small or concentrated contributor base

Maturity76

Established project with proven stability

 Bus Factor1

Top contributor holds 84.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~40 days

Recently: every ~265 days

Total

48

Last Release

2029d ago

Major Versions

v1.0.3 → v2.0.02016-03-18

v2.1.3 → v3.0-alpha2016-04-28

v2.1.x-dev → v3.0.42016-07-22

### Community

Maintainers

![](https://www.gravatar.com/avatar/fbd6c1e93ed92f4ad92b9f53a7bad87eaa598a70bae172a3d40b1333c491b596?d=identicon)[mervick](/maintainers/mervick)

---

Top Contributors

[![mervick](https://avatars.githubusercontent.com/u/2429298?v=4)](https://github.com/mervick "mervick (336 commits)")[![carpii](https://avatars.githubusercontent.com/u/421266?v=4)](https://github.com/carpii "carpii (15 commits)")[![klasjersevi](https://avatars.githubusercontent.com/u/7000348?v=4)](https://github.com/klasjersevi "klasjersevi (13 commits)")[![lacerdev](https://avatars.githubusercontent.com/u/8058570?v=4)](https://github.com/lacerdev "lacerdev (9 commits)")[![MerlinMason](https://avatars.githubusercontent.com/u/3215478?v=4)](https://github.com/MerlinMason "MerlinMason (7 commits)")[![pederjohnsen](https://avatars.githubusercontent.com/u/1238485?v=4)](https://github.com/pederjohnsen "pederjohnsen (6 commits)")[![Invader444](https://avatars.githubusercontent.com/u/577459?v=4)](https://github.com/Invader444 "Invader444 (4 commits)")[![ksullivan](https://avatars.githubusercontent.com/u/2256000?v=4)](https://github.com/ksullivan "ksullivan (3 commits)")[![Vasiliy-Bondarenko](https://avatars.githubusercontent.com/u/5263184?v=4)](https://github.com/Vasiliy-Bondarenko "Vasiliy-Bondarenko (1 commits)")[![elomarns](https://avatars.githubusercontent.com/u/13167?v=4)](https://github.com/elomarns "elomarns (1 commits)")[![got2be](https://avatars.githubusercontent.com/u/2752101?v=4)](https://github.com/got2be "got2be (1 commits)")[![ohenepee](https://avatars.githubusercontent.com/u/15159487?v=4)](https://github.com/ohenepee "ohenepee (1 commits)")[![allanbrault](https://avatars.githubusercontent.com/u/3891597?v=4)](https://github.com/allanbrault "allanbrault (1 commits)")

### Embed Badge

![Health badge](/badges/mervick-emojionearea/health.svg)

```
[![Health](https://phpackages.com/badges/mervick-emojionearea/health.svg)](https://phpackages.com/packages/mervick-emojionearea)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)