Emoji表情还能这样玩？

程序员老鱼

发布于 2022-12-02 10:06:33

1.5K0

发布于 2022-12-02 10:06:33

文章被收录于专栏：前端实验室

大家好,我是前端实验室的大师兄！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~

今天要给大家分享的是网页交互中最常用的功能：表情包。

前言

纯粹的文字有时显得那么苍白无力，一个表情反而更胜千言万语。

小伙伴们接到的评论功能，往往都需要带上表情包。

今天大师兄给大家分享个贼好用的表情包插件: jQuery-emoji

功能

支持给textarea或可编辑div加上表情功能，自动识别元素类型。
- 如果是textarea，则选择表情后插入表情代码.
(大家可能会疑惑：这个表情代码有什么用？接着往下看就知道啦)
- 如果是可编辑div，则直接插入表情图片。
使用可编辑的div在输入时就方便很多了:选的什么，输入的就是什么。

唯一需要注意的就是这个表情弹窗的触发按钮不是表情（图中红框所示）。这是因为在表情包没有初始化前，表情是显示不出来的。这里需要个图片来代替下~

支持自定义表情代码的格式。

这套插件中，表情包都是通过别名对应图片来显示的。显示的图片放在/dist/img/目录下(也可以自己在配置中设置目录)。因此，完全可以添加自己设定的表情包哦。

$("#editor").emoji({
    button: "#btn",
    showTab: false,
    animation: 'slide',
    icons: [{
        name: "QQ表情",
        path: "dist/img/qq/",
        maxNum: 91,
        excludeNums: [41, 45, 54],
        file: ".gif"
    }]
});

上面的示例中path定义了路径，file定义了格式

支持将表情代码转换为表情图片。

还记得之前的textarea中添加表情时的疑惑吗？

只显示表情代码，怎么办？emojiParse方法来帮忙。

 $("#sourceText").emojiParse(...);

为什么要提供再解析一次的方法呢？这主要是为了处理存储返回的表情数据。

存储返回的数据必然只是这个表情的代码。你需要把这个代码解析为表情。

示例已带有百度贴吧和qq高清2套表情。支持多组表情并提供tab切换。

表情包的tab版面也是可以配置的。

$("#content").emoji({
    showTab: true,
    animation: 'fade',
    icons: [{
        name: "贴吧表情",
        path: "dist/img/tieba/",
        maxNum: 50,
        file: ".jpg",
        placeholder: ":{alias}:",
        ...
        },
        , {
        path: "dist/img/qq/",
        maxNum: 91,
        excludeNums: [41, 45, 54],
        file: ".gif",
        placeholder: "#qq_{alias}#"
    }]
    });

多套版面就是这里的icons数组来实现的

使用

引用

首先下载依赖包（也可直接在文章末尾处获取资源）

npm install --save jQuery-emoji

之后在页面上引用css文件和js文件，css文件一般在<head>中添加，js文件一般在</body>之前添加。

注意要先引用jquery和jquery.mCustomScrollbar，再引用该js。因为该插件是需要jquery支持的。

<head>
    <link rel="stylesheet" href="lib/css/jquery.mCustomScrollbar.min.css"/>

    <link rel="stylesheet" href="css/jquery.emoji.css"/>
    
</head>
<body>
  <textarea class="form-control" id="content" rows="3"></textarea>
  <div>或者</div>
  <div id="editor" contenteditable="true"></div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>

<script src="lib/script/jquery.mousewheel-3.0.6.min.js"></script>

<script src="lib/script/jquery.mCustomScrollbar.min.js"></script>

<script src="js/jquery.emoji.js"></script>
</body>

调用

在文本框或可编辑div上初始化emoji

$("#content").emoji(options);

参数

参数都比较简单，如下图

方法

前面的介绍中也使用到了一些方法，这里再总结下。

初始化表情:emoji(options)

$("#editor").emoji({
    icons: [{
        name: "QQ表情",
        path: "img/qq/",
        maxNum: 91,
        excludeNums: [41, 45, 54],
        file: ".gif",
        placeholder: "#qq_{alias}#"
    }]
});

显示表情面板：emoji('show')