jquery.qqface
jQuery QQ 表情插件。
点击一个按钮,弹出一个选择QQ表情的组件,点击即可选择表情,插入到textara里面。
查看示例:https://bin20060407.github.io/jquery.qqface/doc/index.html
From
从 http://kyo4311.github.io/jquery.qqface/ 修改而来,根据实际项目做了相应调整
更新历史
1.0.2
- 表情选择由多张gif转为一张png背景图,避免一次性载入太多图片
- 表情数量扩充为105
- css 样式改为独立
- 去掉“imgPath”参数
开始使用
- 引入jQuery
- 引入jquery.qqface.css
- 引入jquery.qqface.js
html
<div>
<textarea id="liveChatContent" spellcheck="false"></textarea>
</div>
<a href="javascript:;" id="face">表情</a>
js
// 看起来很简单!
$.qqface({
textarea : $('#liveChatContent'),
handle : $('#face')
});
进阶使用
页面有多个需要输入表情的文本框,对应触发输入也有多个,输入框可能是动态生成
html
<div>
<textarea id="chat-1" spellcheck="false"></textarea>
</div>
<a href="javascript:;" class="face" data-id="1">表情</a>
<div>
<textarea id="chat-2" spellcheck="false"></textarea>
</div>
<a href="javascript:;" class="face" data-id="2">表情</a>
js
$.qqface({
handle : 'a.face',
// 动态设置表情插入的文本框
setTextArea : function(current) {
return $('#chat-' + current.data('id'));
}
});
参数列表
参数 | 类型 | 说明 |
---|---|---|
before | function | 插入前执行回调函数 |
after | function | 插入后执行回调函数 |
handle | string | object | 点击触发表情选择展开元素,jQuery对象或者jQuery选择器字符串 |
setTextArea | function | 动态设置插入textarea对象,返回jQuery对象 |
开发
# clone
git clone ...
# 进入目录
npm install
# 打包发布
npm run build
代码列表
序号 | 符号 | 中文释义 | 图片 |
---|---|---|---|
0 | /::) | 微笑 | |
1 | /::~ | 撇嘴 | |
2 | /::B | 色 | |
3 | /::| | 发呆 | |
4 | /:8-) | 得意 | |
5 | /::< | 流泪 | |
6 | /::$ | 害羞 | |
7 | /::X | 闭嘴 | |
8 | /::Z | 睡 | |
9 | /::’( | 大哭 | |
10 | /::-| | 尴尬 | |
11 | /::@ | 发怒 | |
12 | /::P | 调皮 | |
13 | /::D | 呲牙 | |
14 | /::O | 惊讶 | |
15 | /::( | 难过 | |
16 | /::+ | 酷 | |
17 | /:–b | 冷汗 | |
18 | /::Q | 抓狂 | |
19 | /::T | 吐 | |
20 | /:,@P | 偷笑 | |
21 | /:,@-D | 可爱 | |
22 | /::d | 白眼 | |
23 | /:,@o | -傲慢 | |
24 | /::g | 饥饿 | |
25 | /:|-) | 困 | |
26 | /::! | 惊恐 | |
27 | /::L | 流汗 | |
28 | /::> | 憨笑 | |
29 | /::,@ | 大兵 | |
30 | /:,@f | 奋斗 | |
31 | /::-S | 咒骂 | |
32 | /:? | 疑问 | |
33 | /:,@x | 嘘 | |
34 | /:,@@ | 晕 | |
35 | /::8 | 折磨 | |
36 | /:,@! | 衰 | |
37 | /:!!! | 骷髅 | |
38 | /:xx | 敲打 | |
39 | /:bye | 再见 | |
40 | /:wipe | 擦汗 | |
41 | /:dig | 抠鼻 | |
42 | /:handclap | 鼓掌 | |
43 | /:&-( | 糗大了 | |
44 | /:B-) | 坏笑 | |
45 | /:<@ | 左哼哼 | |
46 | /:@> | 右哼哼 | |
47 | /::-O | 哈欠 | |
48 | /:>-| | 鄙视 | |
49 | /:P-( | 委屈 | |
50 | /::’| | 快哭了 | |
51 | /:X-) | 阴险 | |
52 | /::* | 亲亲 | |
53 | /:@x | 吓 | |
54 | /:8* | 可怜 | |
55 | /:pd | 菜刀 | |
56 | /: |
西瓜 | |
57 | /:beer | 啤酒 | |
58 | /:basketb | 篮球 | |
59 | /:oo | 乒乓 | |
60 | /:coffee | 咖啡 | |
61 | /:eat | 饭 | |
62 | /:pig | 猪头 | |
63 | /:rose | 玫瑰 | |
64 | /:fade | 凋谢 | |
65 | /:showlove | 示爱 | |
66 | /:heart | 爱心 | |
67 | /:break | 心碎 | |
68 | /:cake | 蛋糕 | |
69 | /:li | 闪电 | |
70 | /:bome | 炸弹 | |
71 | /:kn | 刀 | |
72 | /:footb | 足球 | |
73 | /:ladybug | 瓢虫 | |
74 | /:shit | 便便 | |
75 | /:moon | 月亮 | |
76 | /:sun | 太阳 | |
77 | /:gift | 礼物 | |
78 | /:hug | 拥抱 | |
79 | /:strong | 强 | |
80 | /:weak | 弱 | |
81 | /:share | 握手 | |
82 | /:v | 胜利 | |
83 | /:@) | 抱拳 | |
84 | /:jj | 勾引 | |
85 | /:@@ | 拳头 | |
86 | /:bad | 差劲 | |
87 | /:lvu | 爱你 | |
88 | /:no | NO | |
89 | /:ok | OK | |
90 | /:love | 爱情 | |
91 | /: |
飞吻 | |
92 | /:jump | 跳跳 | |
93 | /:shake | 发抖 | |
94 | /: |
怄火 | |
95 | /:circle | 转圈 | |
96 | /:kotow | 磕头 | |
97 | /:turn | 回头 | |
98 | /:skip | 跳绳 | |
99 | /:oY | 投降 | |
100 | /:#-0 | 激动 | |
101 | /:hiphot | 乱舞 | |
102 | /:kiss | 献吻 | |
103 | /:<& | 左太极 | |
104 | /:&> | 右太极 |
注: 符号对应微信公众号表情符号
显示
JavaScript
// todo 预处理
content.replace(/\[em_(\d+)\]/g, '<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/$1.gif" />');
PHP
// 预处理
$str = nl2br(htmlspecialchars($str));
preg_replace('/\[em_(\d+)\]/', 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/$1.gif', $str);
注意: 不管是前端还是后端输出显示,都应做转换换行和转义HTML实体符处理(预防XSS攻击
),参照上方PHP代码
Todo
- 新增js、PHP最终显示表情说明
- css 样式支持分离和一起
- 公布到npm
License
Copyright (c) 2019 Binbin Licensed under the MIT License.