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

1. 表情选择由多张gif转为一张png背景图，避免一次性载入太多图片
2. 表情数量扩充为105
3. css 样式改为独立
4. 去掉“imgPath”参数

开始使用

1. 引入jQuery
2. 引入jquery.qqface.css
3. 引入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.