# Emoji One Area

## Simple jQuery WYSIWYG editor with emojione smiles for use in replies and comments

View on GitHub Download .zip Download .tar.gz

## Emoji One Area

Emojione-area 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.

## Demo

From:

Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.

To:

Code:

    <div class="row">
      <div class="col-6">
        <p>From:</p>
        <textarea id="demo1">
    Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
    </textarea>
      </div>
      <div class="col-6">
        <p>To:</p>
        <div id="container"></div>
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#demo1").emojioneArea({
          container: "#container",
          hideSource: false,
        });
      });
    </script>

## Standalone mode

Allows a single emoji to be picked without a text input, useful for emoji reactions or as an addition to another WYSIWYG editor. Can be initialised with an initial value or a placeholder.

      <div id="standalone" data-emoji-placeholder=":smiley:"></div>

      <script type="text/javascript">
        $(document).ready(function() {
          $("#standalone").emojioneArea({
            standalone: true,
            autocomplete: false
          });
        });
      </script>

## Installation

The preferred way to install is via `bower`, `npm` or `Composer`.

Using Bower:

    bower install emojionearea

Using npm:

    npm install emojionearea

Using Composer:

    composer require mervick/emojionearea

Also you can download source files directly from Github.

## Options

Customize emojione version

      // version by default is 1.5.2

Default options

      var default_options = {
          template          : "<editor/><filters/><tabs/>", // plugin template

          dir               : "ltr", // direction http://www.w3schools.com/tags/att_global_dir.asp
          spellcheck        : false, // spellcheck http://www.w3schools.com/tags/att_global_spellcheck.asp
          autocomplete      : "off", // autocomplete http://www.w3schools.com/tags/att_input_autocomplete.asp
          autocorrect       : "off", // autocorrect https://davidwalsh.name/disable-autocorrect
          autocapitalize    : "off", // autocapitalize http://www.w3schools.com/tags/att_input_autocomplete.asp

          placeholder       : null, // placeholder
          container         : null, // by default, emojionearea container created directly under source,
                                    // in this option you can specify custom {jQuery|selector} container

          hideSource        : true, // hide source element after binding
          autoHideFilters   : false, // auto hide filters panel

          useSprite         : true, // use sprite instead of images, is awesome, but not works in old browsers
          shortnames        : false, // if true - will converts emojis to short names,
                                     // by default converts emojis to unicode characters

          filters: {
            // customize filters & emoji buttons
            // see in source file
          },

          events: {
            // events handlers
            // see events below
          }
      };

## Api

      .on(events, handler);
      // - events
      //   Type: String
      //   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.

      .off(events[, handler]);
      // - events
      //   Type: String
      //   One or more space-separated event types and optional namespaces
      // - handler
      //   Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] )
      //   A handler function previously attached for the event(s)

      // built-in events:
      //   "mousedown", "mouseup", "click", "keyup", "keydown", "keypress"
      //   "filter.click", "emojibtn.click", "arrowLeft.click", "arrowRight.click",
      //   "focus", "blur", "paste", "resize", "change"

      .setText(str);
      // - str
      //   Type: String
      //   Set text

      .getText();
      //   Get text

      // Usage methods, example:
      var el = $("selector").emojioneArea();
      el[0].emojioneArea.on("emojibtn.click", function(btn) {
        console.log(btn.html());
      });

## Events

Two ways to set events, in options:

    $("selector").emojioneArea({
      events: {
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        focus: function (editor, event) {
          console.log('event:focus');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        blur: function (editor, event) {
          console.log('event:blur');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        mousedown: function (editor, event) {
          console.log('event:mousedown');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        mouseup: function (editor, event) {
          console.log('event:mouseup');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        click: function (editor, event) {
          console.log('event:click');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        keyup: function (editor, event) {
          console.log('event:keyup');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        keydown: function (editor, event) {
          console.log('event:keydown');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        keypress: function (editor, event) {
          console.log('event:keypress');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        paste: function (editor, event) {
          console.log('event:paste');
        },
        /**
         * @param {jQuery} editor EmojioneArea input
         * @param {Event} event jQuery Event object
         */
        change: function (editor, event) {
          console.log('event:change');
        },
        /**
         * @param {jQuery} filter EmojioneArea filter
         * @param {Event} event jQuery Event object
         */
        filter_click: function (filter, event) {
          console.log('event:filter.click, filter=' + filter.data("filter"));
        },
        /**
         * @param {jQuery} button EmojioneArea emoji button
         * @param {Event} event jQuery Event object
         */
        emojibtn_click: function (button, event) {
          console.log('event:emojibtn.click, emoji=' + button.children().data("name"));
        },
        /**
         * @param {jQuery} button EmojioneArea left arrow button
         * @param {Event} event jQuery Event object
         */
        arrowLeft_click: function (button, event) {
          console.log('event:arrowLeft.click');
        },
        /**
         * @param {jQuery} button EmojioneArea right arrow button
         * @param {Event} event jQuery Event object
         */
        arrowRight_click: function (button, event) {
          console.log('event:arrowRight.click');
        }
      }
    });

or by `.on()` & `.off()` methods:

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

Events listener example

Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.

EmojioneArea Events

## Examples

Auto hide filters

Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.

    <textarea id="example1">
    Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
    </textarea>

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

Using `div`

Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.

    <div id="example2">
    Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
    </div>

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

Using `input`

    <input id="example3" value="Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.">

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

Images instead of the sprite

Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.

    <textarea id="example4">
    Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
    </textarea>

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

Customize layout

Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.

    <textarea id="example5">
    Lorem ipsum dolor 😍 sit amet, consectetur 👻 adipiscing elit, 🖐 sed do eiusmod tempor ☔ incididunt ut labore et dolore magna aliqua 🐬.
    </textarea>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#example5").emojioneArea({
          template: "<filters/><tabs/><editor/>"
        });
      });
    </script>

## Requirements

- jQuery >= 1.8.2
- EmojiOne >= 1.5.0

## License

EmojiOneArea is released under the MIT license.