README

EmojioneArea

EmojioneArea 是一个小的 jQuery 插件，可以将任何 HTML 元素转换成简单的 WYSIWYG 编辑器，并具有使用 Emojione 图标的能力。
最终结果是安全的文本/plain，其中图像图标将被它们的 Unicode 相似物替换。

预览版本 3.x

在此处查看实时演示

版本 2.1.x

安装

首选的安装方式是通过 bower、npm 或 composer。

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

用法

将以下行添加到 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>

简单用法

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

EmojioneArea 使用精彩的 Emojione 表情符号。
因此，当 emojionearea.js 加载时，也必须加载 emojione.js，但如果它未在页面中加载，则 EmojioneArea 会从 CDN 加载它。
为了避免这种行为，您可以将在您的页面中添加 emojione.js 和 emojione.css。

自定义 emojione 版本

通过更改以下值，您可以更改从 CDN 加载的 emojione 版本

window.emojioneVersion = "3.1.2";

选项

`standalone`

独立模式

类型: 布尔值
默认值: false

示例

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

预览

`emojiPlaceholder`

独立模式中按钮的占位符（默认表情符号）。
仅与独立模式一起使用

类型: 字符串
默认值: ':smiley:'
接受值: [任何 emojione 短名称]

示例

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

`placeholder`

编辑器的占位符

类型: 字符串
默认值: [使用源输入的占位符属性]

示例

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

`search`

是否启用在选择器中搜索表情符号

类型: 布尔值
默认值: true

示例

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

`searchPlaceholder`

搜索占位符

类型: 字符串
默认值: 'SEARCH'

示例

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

`useInternalCDN`

是否使用加载机制从 CDN 加载 EmojiOne

类型: 布尔值
默认值: true

示例

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

`buttonTitle`

表情按钮的标题（悬停时的提示）

类型: 字符串
默认值: "使用 TAB 键快速插入表情符号"

示例

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

`recentEmojis`

是否在选择器中显示最近选择的表情符号

类型: 布尔值
默认值: true

示例

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

`pickerPosition`

表情符号选择器相对于编辑器的位置

类型: 字符串
默认值: 'top'
接受值: 'top' | 'right' | 'bottom'

示例

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

`filtersPosition`

表情符号选择器中过滤器标题的位置

类型: 字符串
默认值: 'top'
接受值: 'top' | 'bottom'

示例

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

`searchPosition`

如果启用了搜索选项，则搜索面板的位置

类型 字符串
默认值: top
接受: 'top' | 'bottom'

示例

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

`hidePickerOnBlur`

当触发失焦事件时是否隐藏选择器

类型: 布尔值
默认值: true

示例

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

`container`

插件的容器。

默认情况下，emojionearea 容器直接创建在源下方。
在此选项中，您可以指定自定义 jQuery|selector 容器。

类型: jQuery|selector
默认值: null

示例

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

是否在表情符号选择器中显示肤色按钮

类型: 布尔值
默认值: true

示例

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

`tonesStyle`

肤色选择器的样式

类型: 字符串
默认值: 'bullet'
接受的值: 'bullet' | 'radio' | 'square' | 'checkbox'

示例

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

`短名称`

默认情况下，EmojioneArea 只从输入源值解析 UTF8 表情符号（例如 😀😊😍🤑😜🤓）。
此选项启用解析短名称（例如 :smile:，:smiley:，:cat: 等）。
这也影响了 setText() 方法的工作。

注意。只影响解析表情符号的方式。
要更改保存表情符号的方式，请使用 saveEmojisAs 选项（见下文）。

类型: 布尔值
默认值: false

示例

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

`saveEmojisAs`

Emojionearea 将图标保存到源的处理程序类型，也影响了 getText() 方法。

类型: 字符串
默认值: 'unicode'
接受的值: 'unicode' | 'shortname' | 'image'

unicode - 将表情符号保存为 UTF8 文本（例如 😀😊😍🤑😜🤓）；
shortname - 将表情符号保存为短名称（例如 :smile:，:smiley:，:cat: 等）；
image - 将表情符号保存为 HTML 图片，示例

<img alt="😀" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f600.png">

`hideSource`

在渲染插件后是否隐藏源输入

类型: 布尔值
默认值: true

示例

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

`inline`

内联模式
是否将插件编辑器用作内联输入

类型: boolean|null
默认值: null
接受的值: null | true | false

null - 自动检测，如果输入是 textarea 则为 false，当它是 input[type=text] 时则为 true

示例

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

预览

`shortcuts`

是否附加快捷键事件

类型: 布尔值
默认值: true

示例

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

`autocomplete`

是否添加表情符号短名称自动完成功能

类型: 布尔值
默认值: true

示例

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

`autocompleteTones`

是否在自动完成下拉菜单中显示皮肤表情符号

类型: 布尔值
默认值: false

示例

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

`textcomplete`

自动完成下拉菜单的设置

类型: object
default:

{
    maxCount  : 15,
    placement : null
}

where

maxCount - 下拉菜单中的最大项目数
placement - 下拉菜单的位置（null | "top" | "absleft" | "absright"）

示例

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

`attributes`

插件编辑器（contenteditable）的 HTML 属性

类型: object
default:

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

where

dir - 方向 https://w3schools.org.cn/tags/att_global_dir.asp
spellcheck - 拼写检查 https://w3schools.org.cn/tags/att_global_spellcheck.asp
autocomplete - 自动完成 https://w3schools.org.cn/tags/att_input_autocomplete.asp
autocorrect - 自动更正 https://davidwalsh.name/disable-autocorrect
autocapitalize- 自动大写 https://w3schools.org.cn/tags/att_input_autocomplete.asp

示例

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

`filters`

表情符号选择器中的筛选器（选项卡）

类型: object
默认值: [可以在以下位置找到完整的默认筛选器这里]

{
    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
    },
}

示例

$(".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
    }
});

方法

方法列表

`.on(events, handler)`

为事件附加处理程序

param events
类型: String
一个或多个空格分隔的事件类型
param handler
类型: Function(jQuery Element, Event eventObject [, any extraParameter ] [, ...])
当事件被触发时执行的一个函数
返回 EmojioneArea 实例

`.off(events[, handler])`

删除先前附加的处理程序（如果指定了处理程序）或指定事件的处理程序

param events
类型: String 一个或多个空格分隔的事件类型
param handler [可选]
类型: Function(jQuery Element, Event eventObject [, any extraParameter ] [, ... ])
通过 .on 方法为事件（s）之前附加的处理程序函数
返回 EmojioneArea 实例

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

触发事件（s）

param events
类型: String
一个或多个空格分隔的事件类型
params [, ...] [可选]
类型: any 额外参数
返回 Boolean 所有调用的处理程序的结果

`.setText(str)`

设置 emojionearea 文本

param str 类型: String
设置文本
返回 EmojioneArea 实例

`.getText()`

获取emojionearea的文本，没有任何HTML，只是纯文本

返回 String

`.showPicker()`

显示选择器区域

返回 EmojioneArea 实例

`.hidePicker()`

隐藏选择器区域

返回 EmojioneArea 实例

`.enable()`

启用emojionearea输入区域

返回 EmojioneArea 实例

`.disable()`

禁用emojionearea输入区域

返回 EmojioneArea 实例

`.setFocus()`

聚焦于emojionearea输入区域

返回 EmojioneArea 实例

方法使用

如何使用方法，示例

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

事件

内置事件列表

`ready` 或 `onLoad`

当emojionearea初始化时触发
处理程序类型: Function (无参数)

`click`

当用户点击emojionearea输入或选择器时触发
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`mousedown`

在emojionearea输入或选择器上触发mousedown
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`mouseup`

在emojionearea输入或选择器上触发mouseup
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`keyup`

在emojionearea输入或选择器上触发keyup
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`keypress`

在emojionearea输入或选择器上触发keypress
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`focus`

在emojionearea输入上触发focus
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`blur`

在emojionearea输入上触发blur
处理程序类型: Function (editor: jQuery, event: Event)

参数 {jQuery} editor - EmojioneArea输入
参数 {Event} event - jQuery事件对象

`paste`

当用户已将内容粘贴到输入区域时触发
处理程序类型: Function (editor: jQuery, text: String, html: String)

参数 {jQuery} editor - EmojioneArea输入
参数 {String} text - 粘贴的纯文本
参数 {String} html - 粘贴的HTML内容

`resize`

当输入区域大小改变时触发
处理程序类型: Function (无参数)

`change`

当输入区域有变化时触发
处理程序类型: Function (无参数)

`emojibtn.click`

当用户点击选择器区域的表情按钮时触发
处理程序类型: Function (emojibtn: jQuery)

参数 {jQuery} emojibtn - 用户点击的表情按钮

`button.click`

当用户点击显示/隐藏按钮时触发
处理程序类型: Function (button: jQuery)

参数 {jQuery} button - 显示/隐藏按钮

`tone.click`

当用户点击音调过滤按钮时触发
处理程序类型: Function (button: jQuery)

参数 {jQuery} button - 用户点击的音调按钮

`picker.show`

显示选择器时触发
处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`picker.hide`

选择器被隐藏时触发
处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`picker.mousedown`

在emojionearea选择器区域上触发mousedown处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`picker.mouseup`

在emojionearea选择器区域上触发mouseup处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`picker.click`

在emojionearea选择器区域上触发click处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`picker.keydown`

在emojionearea选择器区域上触发keydown处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`picker.keypress`

在emojionearea选择器区域上触发keypress处理程序类型: Function (picker: jQuery)

参数 {jQuery} picker - 选择器区域

`search.focus`

在选择器搜索区域上触发focus
处理程序类型: Function (无参数)

`search.keypress`

当用户在搜索区域按键时触发
处理程序类型: Function (无参数)

事件使用

设置事件有两种方式，直接在选项中通过events选项。
注意：对于包含. (点)的事件，您可以使用_ (破折号)代替. (点)。

示例：在选项中设置事件

$("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"));
    }
  }
});

您还可以通过.on()、.off()和.trigger()方法来管理事件

示例

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

构建

构建EmojiOneArea需要grunt、compass和sass可用

为了进行更改和构建项目（scss/js）

npm update
npm run build

欢迎PR！！！

常见问题解答/故障排除

EmojiOne图标显示比预期大

这很可能是由于某些脚本包含顺序错误（或者根本未包含！）包含jQuery，然后是EmojiOne，然后是EmojiOneArea脚本

我能否使用EmojiOneArea只在一个div中显示表情图标？

EmojiOneArea旨在成为一个支持EmojiOne的文本编辑器。如果您只想显示表情图标，EmojiOne库已经提供了您所需的一切。

我能否在EmojiOneArea中添加额外的按钮，与现有的表情选择器图标并排显示？

这还不完全被支持，但您可以在EmojiOneArea初始化后响应jQuery的onLoad事件，并在这一点将您的按钮插入DOM中，请参阅 #152

Firefox在EmojiOneArea中不正确地定位输入光标

这似乎是一个长期存在的Firefox问题，可能与contenteditable、placeholder属性以及伪：before或：after类有关 https://bugzilla.mozilla.org/show_bug.cgi?id=1020973

有各种解决方案，如更改占位符或添加一些填充。请参阅 #86

我能否修改EmojiOneArea选择器的位置？

您可以使用pickerPosition选项，它提供了对选择器出现在哪里的基本控制，相对于源输入。对于更多控制，您可以应用translate CSS到选择器

已知问题

Internet Explorer焦点问题

IE 11会在点击表情选择器滚动条时使EmojiOneArea隐藏（并触发blur事件），目前还没有解决这个问题，尽管有几个简单的解决方案。请参阅 #127

EmojiOneArea定位

已知与定位EmojiOneArea选择器的问题。它目前无法确保选择器在小屏幕设备上完全可见，或从页面底部调用时位置正确（可能被裁剪）。请参阅 #131

浏览器每次实例化EmojiOneArea时都会从CDN加载textcomplete.js

您可以通过显式地将textcomplete脚本包含到您的文档中来避免这种情况。如果它已经存在，EmojiOneArea将使用预加载的脚本而不是尝试为每个实例从CDN加载它。您也可以通过将自动完成选项设置为false来完全禁用自动完成

需求

jQuery >= 1.8.2

许可证

EmojiOneArea是在MIT许可证下发布的。

mervick / emojionearea

维护者

详细信息

README

EmojioneArea

预览版本 3.x

安装

用法

自定义 emojione 版本

选项

standalone

emojiPlaceholder

placeholder

search

searchPlaceholder

useInternalCDN

buttonTitle

recentEmojis

pickerPosition

filtersPosition

searchPosition

hidePickerOnBlur

container

tones

tonesStyle

短名称

saveEmojisAs

hideSource

inline

shortcuts

autocomplete

autocompleteTones

textcomplete

attributes

filters

方法

.on(events, handler)

.off(events[, handler])

.trigger(events[, ... ])

.setText(str)

.getText()

.showPicker()

.hidePicker()

.enable()

.disable()

.setFocus()

方法使用

事件

ready 或 onLoad

click

mousedown

mouseup

keyup

keypress

focus

blur

paste

resize

change

emojibtn.click

button.click

tone.click

picker.show

picker.hide

picker.mousedown

picker.mouseup

picker.click

picker.keydown

picker.keypress

search.focus

search.keypress

事件使用

构建

常见问题解答/故障排除

EmojiOne图标显示比预期大

我能否使用EmojiOneArea只在一个div中显示表情图标？

我能否在EmojiOneArea中添加额外的按钮，与现有的表情选择器图标并排显示？

Firefox在EmojiOneArea中不正确地定位输入光标

我能否修改EmojiOneArea选择器的位置？

已知问题

`standalone`

`emojiPlaceholder`

`placeholder`

`search`

`searchPlaceholder`

`useInternalCDN`

`buttonTitle`

`recentEmojis`

`pickerPosition`

`filtersPosition`

`searchPosition`

`hidePickerOnBlur`

`container`

`tones`

`tonesStyle`

`短名称`

`saveEmojisAs`

`hideSource`

`inline`

`shortcuts`

`autocomplete`

`autocompleteTones`

`textcomplete`

`attributes`

`filters`

`.on(events, handler)`

`.off(events[, handler])`

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

`.setText(str)`

`.getText()`

`.showPicker()`

`.hidePicker()`

`.enable()`

`.disable()`

`.setFocus()`

`ready` 或 `onLoad`

`click`

`mousedown`

`mouseup`

`keyup`

`keypress`

`focus`

`blur`

`paste`

`resize`

`change`

`emojibtn.click`

`button.click`

`tone.click`

`picker.show`

`picker.hide`

`picker.mousedown`

`picker.mouseup`

`picker.click`

`picker.keydown`

`picker.keypress`

`search.focus`

`search.keypress`