DOCSEARCHbyAlgolia
Submit Docs

EmojioneArea

repository·master·Indexed 21 days ago

https://github.com/mervick/emojionearea

A jQuery plugin that transforms HTML elements, such as textareas or inputs, into a WYSIWYG editor with integrated Emojione emoji support. It features a visual emoji picker and allows saving output as Unicode, shortnames, or HTML images. Version 3.4.1 supports standalone mode, autocomplete, and customizable picker positions.

Tokens
4.2K
Snippets
19
Records
21
Agent score
26%

What's inside emojionearea

  2. Quickstart: Transform an element into an emoji editor

    master

    To use EmojioneArea, include the CSS and JS files in your HTML <head>, then initialize the plugin on a textarea or input element using jQuery.

    <link rel="stylesheet" href="file/to/path/css/emojionearea.min.css">
<script type="text/javascript" src="file/to/path/js/emojionearea.min.js"></script>

<textarea id="example1"></textarea>

<script type="text/javascript">
  $(document).ready(function() {
    $("#example1").emojioneArea();
  });
</script>

  4. Install EmojiOne Area v2.1

    master

    You can install the legacy version 2.1 of EmojiOne Area using Bower, npm, or Composer.

    Note: Version 2.1 is legacy and unsupported. For new projects, use the 3.x version.

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

  5. Initialize EmojiOne Area v2.1

    master

    To use EmojiOne Area, first include the CSS and JS files in your HTML <head>. Then, initialize it on a <textarea> element using jQuery.

    Requirements:

    • jQuery >= 1.8.2
    <link rel="stylesheet" href="file/to/path/css/emojionearea.min.css">
<script type="text/javascript" src="file/to/path/js/emojionearea.min.js"></script>

<textarea id="example1"></textarea>

<script type="text/javascript">
  $(document).ready(function() {
    $("#example1").emojioneArea();
  });
</script>

  6. Customize the Emojione version loaded from CDN

    master

    EmojioneArea automatically loads emojione.js from a CDN if it is not already present on your page. You can specify a specific version of Emojione to be used by setting the window.emojioneVersion variable before the plugin initializes.

    window.emojioneVersion = "3.1.2";

  7. Handle EmojiOne Area v2.1 events

    master

    Events can be handled in two ways: by defining an events object within the initialization options, or by using the .on() and .off() methods on the plugin instance.

    Event Handlers via Options: When using the events object in options, handlers receive specific arguments:

    • For standard input events (e.g., focus, blur, click): function(editor, event) where editor is the jQuery element.
    • For filter_click: function(filter, event) where filter is the filter element.
    • For emojibtn_click: function(button, event) where button is the emoji button element.
    • For arrowLeft_click / arrowRight_click: function(button, event).

    Event Handlers via .on()/.off(): Access the internal API via the first element of the jQuery object: el[0].emojioneArea.

    var el = $("#example1").emojioneArea();

// Attach event
el[0].emojioneArea.on("emojibtn.click", function(button, event) {
  console.log('emoji=' + button.children().data("name"));
});

// Unset event
el[0].emojioneArea.off("emojibtn.click");
    // Example: Handling events via options
$("#example1").emojioneArea({
  events: {
    focus: function (editor, event) {
      console.log('event:focus');
    },
    emojibtn_click: function (button, event) {
      console.log('event:emojibtn.click, emoji=' + button.children().data("name"));
    }
  }
});

  8. Configure picker and search positions

    master

    You can control where the emoji picker, search panel, and filters appear relative to the editor using the following options:

    • pickerPosition: Position of the emoji picker ('top', 'right', or 'bottom'). Default is 'top'.
    • searchPosition: Position of the search panel if search is enabled ('top' or 'bottom'). Default is 'top'.
    • filtersPosition: Position of the filters header in the picker ('top' or 'bottom'). Default is 'top'.
    $(".emojionearea").emojioneArea({
    pickerPosition: "bottom",
    searchPosition: "bottom",
    filtersPosition: "bottom"
});

  9. Configure EmojiOne Area v2.1 options

    master

    You can customize the editor behavior by passing an options object to .emojioneArea().

    Key configuration options include:

    • template: The plugin template (e.g., "<editor/><filters/><tabs/>").
    • pickerPosition: Position of the picker relative to input ("top", "bottom", or "right").
    • tones: Boolean to show/hide skin tone buttons.
    • tonesStyle: Style of skin tones selector ("bullet", "radio", "square", or "checkbox").
    • shortnames: If true, converts emojis to short names; otherwise, uses Unicode.
    • standalone: If true, uses the standalone EmojiOneArea picker (v2.1 only).
    • textcomplete: Configuration for autocomplete (maxCount, placement).

    You can also customize the Emojione version globally by setting window.emojioneVersion before initialization.

    // Customize emojione version (default is 1.5.2)
window.emojioneVersion = "2.1.1";

// Example usage with options
$("#example1").emojioneArea({
    pickerPosition: "top",
    tones: true,
    tonesStyle: "bullet",
    shortnames: false,
    standalone: false
});

  10. Configure how emojis are saved to the source

    master

    The saveEmojisAs option determines how emojis are stored in the original input element and how they are retrieved via .getText().

    Supported values:

    • 'unicode': Saves emojis as UTF-8 text (e.g., 😀). (Default)
    • 'shortname': Saves emojis as Emojione shortnames (e.g., :smile:).
    • 'image': Saves emojis as HTML <img> tags.
    $(".emojionearea").emojioneArea({
    saveEmojisAs: 'shortname'
});

  11. Customize emoji picker filters

    master

    You can enable, disable, or customize the appearance of the emoji category tabs (filters) in the picker. Each filter object can have its icon, title, or emoji list modified, or be set to false to disable it entirely.

    $(".emojionearea").emojioneArea({
    filters: {
        recent: false, // disable recent
        smileys_people: {
            icon: 'cat'
        },
        animals_nature: {
            title: 'Animals'
        },
        objects: false, // disable objects filter
        symbols: false,
        flags: false
    }
});

  12. Configure the autocomplete dropdown

    master

    The autocomplete option enables/disables the emoji shortname autocomplete feature. You can further customize the dropdown using the textcomplete object.

    textcomplete options:

    • maxCount: Maximum number of items in the dropdown.
    • placement: Placement of the dropdown (null, 'top', 'absleft', or 'absright').
    $(".emojionearea").emojioneArea({
    autocomplete: true,
    textcomplete: {
        maxCount: 20,
        placement: 'absleft'
    }
});