Emoji Picker 项目教程

最新推荐文章于 2025-05-18 09:00:00 发布

宗隆裙

最新推荐文章于 2025-05-18 09:00:00 发布

阅读量421

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00238/article/details/142777947

Emoji Picker 项目教程

emoji-picker Add a slick emoji selector to input fields and textareas on your website. 项目地址: https://gitcode.com/gh_mirrors/em/emoji-picker

1. 项目介绍

Emoji Picker 是一个开源项目，旨在为网站上的输入字段和文本区域添加一个流畅的表情符号选择器。该项目基于 jQuery 和 FontAwesome，允许用户在输入文本时轻松插入表情符号。Emoji Picker 不仅支持 Unicode 表情符号，还可以将表情符号显示为图像，从而提供更丰富的用户体验。

2. 项目快速启动

安装与使用

下载项目：首先，从 GitHub 仓库下载 Emoji Picker 项目：
```
git clone https://github.com/jmadler/emoji-picker.git
```

引入必要的文件：在你的 HTML 文件的 <head> 部分，添加以下样式表链接：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/css/emoji.css" rel="stylesheet">

引入 JavaScript 文件：在 <body> 部分的末尾，添加以下 JavaScript 链接。注意，Emoji Picker 依赖于 jQuery，因此必须先引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="lib/js/config.min.js"></script>
<script src="lib/js/util.min.js"></script>
<script src="lib/js/jquery.emojiarea.min.js"></script>
<script src="lib/js/emoji-picker.min.js"></script>

初始化 Emoji Picker：在你的 JavaScript 文件中，初始化 Emoji Picker 并绑定到你的输入字段：

$(function() {
    // 初始化并创建表情符号集
    window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: '/lib/img/',
        popupButtonClasses: 'fa fa-smile-o' // 如果使用 FontAwesome 5，则为 'far fa-smile'
    });

    // 查找所有带有 `emojiable_selector` 属性的元素，并将其转换为富表情符号输入字段
    window.emojiPicker.discover();
});

在输入字段中启用 Emoji Picker：在你的 HTML 中，为需要启用 Emoji Picker 的输入字段添加 data-emojiable="true" 属性，并将其放在一个带有 emoji-picker-container 类的容器中：
```
<div class="emoji-picker-container">
    <input type="text" data-emojiable="true">
</div>
```