开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

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

See the Live Demo here

Version 2.1.x

Installation

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

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

Usage

Add the following lines to the head:

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

Simple usage:

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

EmojioneArea uses awesome 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

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

window.emojioneVersion = "3.1.2";

Options

standalone

Standalone mode

type: boolean
default: false

Example:

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

Preview:

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

The placeholder of the editor

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

Example:

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

search

Whether is enabled search emojis in the picker

type: boolean
default: true

Example:

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

searchPlaceholder

The search placeholder

type: string
default: 'SEARCH'

Example:

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

useInternalCDN

Whether to use the loading mechanism to load EmojiOne from CDN

type: boolean
default: true

Example:

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

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

Whether to show recently selected emojis in the picker

type: boolean
default: true

Example:

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

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

The position of the filters header in the emojis picker

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

Example:

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

searchPosition

The search panel position if search option enabled

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

Example:

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

hidePickerOnBlur

Whether to hide picker when blur event triggers

type: boolean
default: true

Example:

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

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:

<input type="text" id="emojionearea1" />
<input type="text" id="emojionearea2" />
<!-- ... -->
<div id="container1"></div> <!-- #emojionearea2 plugin will use this container -->
<div id="container2"></div> <!-- #emojionearea1 plugin will use this container -->
<script>
    $("#emojionearea1").emojioneArea({
        container: "#container2" // by selector
    });
    $("#emojionearea2").emojioneArea({
        container: $("#container1") // by jQuery object
    });
</script>

tones

Whether to show the skin tone buttons in the emoji picker

type: boolean
default: true

Example:

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

tonesStyle

The style of the skin tones selector

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

Example:

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

shortnames

By default EmojioneArea parses only utf8 emojis (e.g.