说明
此插件在 @eshengsky 的基础上修改而来！
相对原版，作了如下改动：
- 新增表情列表根文件目录设置
- 删除对 mCustomScrollbar 的依赖
- 更改表情配置方式
- 修改表情预览框位置的判定方式
- 增加对移动端的兼容
- 整合了贴吧、QQ、微博、阿鲁全套表情
功能 features
- 支持给textarea或可编辑div加上表情功能，自动识别元素类型。
Support for adding emoji into textarea or editable div, automatic identification of element types. - 如果是textarea，则选择表情后插入表情代码，如果是可编辑div，则直接插入表情图片。
If it is textarea element,will insert code string of emoji, else, will insert emoji picture directly. - 支持自定义表情代码的格式。
Support for specifying the code format of emoji. - 支持将表情代码转换为表情图片。
Support for converting the code string of emoji into emoji picture. - 支持多组表情并提供tab切换。
Support for multiple groups of emoji and tabs to toggle. - 示例已带有QQ、贴吧、微博、阿鲁表情。
- 同一页面支持多个表情实例。
Support for multiple instances in one page.
示例 demo
文本框 textarea
代码 code
$("#content").emoji({
showTab: true,
animation: 'fade',
basePath: 'images/emoji',
icons: emojiLists // 注：详见 js/emoji.list.js
});可编辑div editable div
代码 code
$("#editor").emoji({
button: "#btn",
showTab: false,
animation: 'slide',
basePath: 'images/emoji',
icons: emojiLists // 注：详见 js/emoji.list.js
});文本转换 text parse
#(玫瑰)这个表情插件超级好用[aru_11]，快来Github 点个 Star！[aru_140]
代码 code
$("#sourceText").emojiParse({
basePath: 'images/emoji',
icons: emojiLists // 注：详见 js/emoji.list.js
});使用 usage
安装 install
$ bower install jquery-emoji引用 reference
首先在页面上引用css文件和js文件，css文件一般在<head>中添加，js文件一般在</body>之前添加
Firstly reference the css and js file of this plugin, the best location of the css reference is in <head>,
and the js is before </body>.
<head>
...
<!--the css for this plugin-->
<link rel="stylesheet" href="css/jquery.emoji.css"/>
</head>
<body>
...
<!--the js for jquery-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<!--the js for this plugin-->
<script src="js/jquery.emoji.js"></script>
</body>调用 invoke
在文本框或可编辑div上初始化emoji
initialize emoji on textarea or editable div
$("#content").emoji(options);参数 options
| 名称 name | 类型 type | 默认值 default | 说明 desc |
|---|---|---|---|
| button | String |
触发表情面板的按钮的选择器，如"#btn1"，若指定则将表情选择面板绑定到该按钮，若未指定，则自动创建一个按钮。 button selector, such as "#btn1", if has value, bind it to the emoji panel. If it is empty, then automatically creates a button. |
|
| showTab | Boolean | true |
当只有一组表情时，是否仍然显示Tab。 if show tab when only one emoji group. |
| animation | String | 'fade' |
表情面板动画效果，可能的值：'fade':淡入淡出，'slide':滚动，'none':无动画。 the animation effect for emoji panel, possible values: 'fade':fade-in fade-out, 'slide':slide up & down, 'none':no animation. |
| basePath | String | 表情图片文件的根路径 | |
| icons | Array | [] |
表情组。 icons group. |
| icons:{ name } | String | group(n) |
该组表情名称。 the name of the icons group. |
| icons:{ path } | String |
必填。该组表情路径。（最终的表情路径组成为 上面的 根路径 + 这里的每组表情的独立路径） required.the path of the icons group. |
|
| icons:{ maxNum } | Number |
未配置 icons:{ emoji } 时必填。该组表情文件名的最大数。 required.the max number of the icons group file name. |
|
| icons:{ excludeNums } | Array | [] |
要排除的表情文件集合。 the exclude icon files. |
| icons:{ file } | String | '.jpg' |
表情文件的后缀名。 the icon file extension. |
| icons:{ placeholder } | String |
'#em(n)_{alias}#' |
该组表情插入文本框后的占位标识，必须包含'{alias}'部分，'{alias}'会被自动替换成每个表情的标识。 the placeholder for the icon group, must contains '{alias}' in it, it will be replaced with the code of each emoji. |
| icons:{ emoji } | String | 每个表情的名字以及表情图片对应的文件名，格式如 {"表情一":"pic1", "表情二":"pic2"} |
* n: 分组的次序 index of the group
方法 method
.emoji(options);
初始化表情。
initialize emoji.
// 代码见上述示例
.emoji('show');
显示表情面板。
show emoji panel.
$("#editor").emoji('show');
.emoji('hide');
隐藏表情面板。
hide emoji panel.
$("#editor").emoji('hide');
.emoji('toggle');
切换显示隐藏表情面板。
show or hide emoji panel.
$("#editor").emoji('toggle');