%20(2).svg)
项目简介
本项目是基于jQuery库开发的“jquery.qqface”插件，为网页提供QQ表情选择功能。用户点击特定按钮可弹出表情选择组件，选择表情后能将其插入指定文本框，方便用户在网页上表达情感。
项目的主要特性和功能
- 具备表情选择功能，点击按钮弹出QQ表情选择组件，用户可自由选择表情插入文本框。
- 支持动态设置文本框，适用于页面有多个需输入表情的文本框，且输入框可能动态生成的情况。
- 拥有丰富的表情库，表情数量扩充至105个，涵盖常见情感表达。
- 进行了性能优化，将表情选择由多张gif转为一张png背景图，避免一次性载入过多图片。
- 提供参数回调，有插入前和插入后执行的回调函数，便于开发者自定义操作。
- 提供JavaScript和PHP的示例代码用于显示表情符号，同时强调预防XSS攻击的处理方式。
安装使用步骤
开始使用
假设用户已下载本项目的源码文件，按以下步骤操作： 1. 引入jQuery。 2. 引入jquery.qqface.css。 3. 引入jquery.qqface.js。
html示例
```html
表情 ```
js示例
js
// 看起来很简单！
$.qqface({
textarea : $('#liveChatContent'),
handle : $('#face')
});
进阶使用
若页面有多个需要输入表情的文本框，对应触发输入也有多个，输入框可能是动态生成，可按以下方式操作：
html示例
```html
表情 ```
js示例
js
$.qqface({
handle : 'a.face',
// 动态设置表情插入的文本框
setTextArea : function(current) {
return $('#chat-' + current.data('id'));
}
});
开发步骤
bash
git clone ...
npm install
npm run build
显示表情
JavaScript
javascript
// todo 预处理
content.replace(/\[em_(\d+)\]/g, '<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/$1.gif" />');
PHP
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代码。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】