一个不错的前端表情插件

mengkun 49.4K 95

丰富的表情是本博客改版后的一大亮点 [aru_3]

老规矩，好东西不独享。咱这就分享一下这款插件！ #(你懂的)

纵观整个博客圈，大多数的博客要么表情很少，要么用的是 @DIYgod 大神的 OwO 实现的多表情。但是，OwO 有一个比较坑的地方在于表情是以 img 标签的形式直接插入到输入框里的……并不是我需要的那种……[aru_15]

正在发愁之时找到了 jQuery-emoji 这款插件，基本能满足我的需求！[aru_37]

But，jQuery-emoji 也并不完美。它的表情配置方式依旧不够灵活，而且在移动端体验较差。花了点时间，将它的代码稍微改了改，这下感觉好多了 #(勉强)（其实还是有点小问题，，不过不影响使用。忽略好了……）

相对于原版，主要改动的地方如下：

  • 新增表情列表根文件目录设置
  • 删除对 mCustomScrollbar 的依赖
  • 更改表情配置方式
  • 修改表情预览框位置的判定方式
  • 增加对移动端的兼容
  • 整合了贴吧、QQ、微博、阿鲁全套表情

修改版下载地址：https://github.com/mengkunsoft/jQuery-emoji

原版下载地址：https://github.com/eshengsky/jQuery-emoji

使用说明参见代码中的 index.html，至于整么整合进 WordPress，请自行研究！本人不提供技术指导 [aru_60]

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. c
    c Lv 1

    挺好

    #60 2021-05-19 13:25 回复
  2. a 过客
    a 过客 Lv 1

    不错已经用上了#(你懂的)

    #59 2021-04-22 18:51 回复
  3. a 过客
    a 过客 Lv 1

    老哥你这个插件对jQuery版本有要求吗[aru_151]

    #58 2021-04-20 20:08 回复
  4. 死亡飞车
    死亡飞车 Lv 1

    [aru_1][aru_2][aru_3][aru_4][aru_5][aru_6][aru_7][aru_8][aru_9][aru_10][aru_11][aru_12][aru_13][aru_14][aru_15][aru_16][aru_17][aru_18][aru_19][aru_20][aru_21][aru_22][aru_23][aru_24][aru_25][aru_26][aru_27][aru_28][aru_29][aru_30][aru_31][aru_32][aru_33][aru_34][aru_35][aru_36][aru_37][aru_38][aru_39][aru_40][aru_41][aru_42][aru_43][aru_44][aru_45][aru_46][aru_47][aru_48][aru_49][aru_50][aru_51][aru_52][aru_53][aru_54][aru_55][aru_56][aru_57][aru_58][aru_59][aru_60][aru_61][aru_62][aru_63][aru_64][aru_65][aru_66][aru_67][aru_68][aru_69][aru_70][aru_71][aru_72][aru_73][aru_74][aru_75][aru_76][aru_77][aru_78][aru_79][aru_80][aru_81][aru_82][aru_83][aru_84][aru_85][aru_86][aru_87][aru_88][aru_89][aru_90][aru_91][aru_92][aru_93][aru_94][aru_95][aru_96][aru_97][aru_98][aru_99][aru_100][aru_101][aru_102][aru_103][aru_104][aru_105][aru_106][aru_107][aru_108][aru_109][aru_110][aru_111][aru_112][aru_113][aru_114][aru_115][aru_116][aru_117][aru_118][aru_119][aru_120][aru_121][aru_122][aru_123][aru_124][aru_125][aru_126][aru_127][aru_128][aru_129][aru_130][aru_131][aru_132][aru_133][aru_134][aru_135][aru_136][aru_137][aru_138][aru_139][aru_140][aru_141][aru_142][aru_143][aru_144][aru_145][aru_146][aru_147][aru_148][aru_149][aru_150][aru_151][aru_152][aru_153][aru_154][aru_155][aru_156][aru_157][aru_158][aru_159][aru_160][aru_161][aru_162][aru_163][aru_164] 按了两分钟，一共164个表清包 ......

    #57 2020-08-28 15:38 回复
  5. 死亡飞车
    死亡飞车 Lv 1

    地址打不开[aru_15]

    #56 2020-08-28 15:28 回复
  6. xx
    xx Lv 1

    这个不错[aru_1]

    #55 2020-04-13 15:40 回复
  7. sure
    sure Lv 1

    讲真，打算分享一下你的工具条吗

    #54 2020-03-18 04:17 回复
  8. 北巷季
    北巷季 Lv 1

    [wb_二哈]

    #53 2020-03-12 01:31 回复
  9. 温言
    温言 Lv 1

    话说，可以付费帮忙配置一下吗。[aru_1][aru_36]

    #52 2020-02-06 02:47 回复
  10. #(滑稽)
    #(滑稽) Lv 1

    #(滑稽)

    #51 2019-11-26 10:07 回复
  11. 呐
    呐 Lv 1

    ...路径配置不起作用是什么情况

    #50 2019-10-25 15:51 回复
    • mengkun
      mengkun 站长

      @呐估计是缓存了修改前的 js 文件，清空一下缓存试试

      2019-10-26 17:55 回复
      • yzb
        yzb Lv 1

        @mengkun本 人 不 提 供 技 术 支 持

        2021-12-10 17:54 回复
  12. TY
    TY Lv 1

    。好吧你把名称改了。。

    #49 2019-09-09 15:10 回复
  13. TY
    TY Lv 1

    发现一个逻辑上的错误，QQ [钱币] 旧贴吧 #[钱币]

    #48 2019-09-09 15:08 回复
  14. 试下
    试下 Lv 1

    [aru_3]就想试试你的表情包

    #47 2019-07-20 10:33 回复
  15. 那个敬业福
    那个敬业福 Lv 1

    讲真，真的喜欢这套表情包

    #46 2019-07-03 11:27 回复
  16. AAAA
    AAAA Lv 1

    厉害[aru_1]

    #45 2019-05-21 16:31 回复
  17. 528947483
    528947483 Lv 1

    怎么添加到后台，坤哥求指教~

    #44 2019-05-15 11:10 回复
  18. wierli
    wierli Lv 1

    很棒呀，百度了一圈终于找到了。#[滑稽]

    #43 2019-04-23 14:36 回复
  19. 译丶浅夏
    译丶浅夏 Lv 1

    #[啊][撇嘴]

    #42 2019-02-20 00:14 回复
  20. 小白
    小白 Lv 1

    怎么整和进wp啊，大佬出个教程吧

    #41 2019-01-22 23:35 回复
  21. 台庄资讯
    台庄资讯 Lv 1

    [aru_162][aru_162]来个教程吧

    #40 2019-01-20 20:32 回复
  22. 小白
    小白 Lv 1

    hadsky轻论坛可以用吗？

    #39 2018-12-11 18:44 回复
  23. 2381548894
    2381548894 Lv 2

    怎么搞进emlog

    #38 2018-12-01 23:38 回复
  24. 男人不可以穷
    男人不可以穷 Lv 2

    感觉都用键值对，超级麻烦，还是循环输出吧[aru_39]

    #37 2018-11-19 18:55 回复
  25. 请叫我大熊
    请叫我大熊 Lv 1

    [斜眼笑]

    #36 2018-11-16 14:01 回复
  26. 多元菌
    多元菌 Lv 1

    [aru_3]我网站用你这款表情包了

    #35 2018-09-04 11:50 回复
  27. 454194741
    454194741 Lv 1

    赞一下

    #34 2018-08-17 11:39 回复
  28. telnet
    telnet Lv 1

    表示完全看不懂，下载下来了，不知道咋弄。。。里面的示例也看不懂，是真的[aru_78]
    ，我不是程序员，但是喜欢瞎捯饬，求高人指点[aru_44]

    #33 2018-07-27 15:36 回复
  29. 1548894273
    1548894273 Lv 1

    使用之后 显示不了表情 是各种代码[aru_15]

    #32 2018-07-07 23:47 回复
  30. 1548894273
    1548894273 Lv 1

    发现识别不了QQ 好昵称[aru_18] 接受邮件通知功能是QQ邮箱吗

    #31 2018-06-30 16:36 回复
    • mengkun
      mengkun 站长

      @1548894273自动填充功能偶尔抽风

      2018-06-30 21:45 回复
      • 1548894273
        1548894273 Lv 1

        @mengkun回复后确实QQ邮件通知了。这功能是不是还要配置MAS机还是其他？

        2018-07-01 14:59 回复
      • mengkun
        mengkun 站长

        @1548894273想多了…… php 发送邮件

        2018-07-01 15:00 回复
      • 1548894273
        1548894273 Lv 1

        @mengkun学习了 我用的是CI框架

        2018-07-01 15:06 回复
      • admin
        admin Lv 1

        @1548894273解决了 感谢！[aru_42]

        2018-07-28 14:43 回复
      • admin
        admin Lv 1

        @mengkun 查看图片
        想问下这个移动端右边多出来这块怎么解决掉啊

        2018-07-27 22:54 回复
      • mengkun
        mengkun 站长

        @admin

        overflow-x: hidden;
        2018-07-28 09:55 回复
      • Admin
        Admin Lv 1

        @mengkun我用过的啊 我用的overflow:hidden但是没有效果 是我加错地方了嘛 我直接放在emoji container上的[aru_16]

        2018-07-28 10:42 回复
      • sure
        sure Lv 1

        @Admin老哥分享下教程？或者说说怎么做可以吗

        2020-03-18 17:15 回复
      • Admin
        Admin Lv 1

        @mengkun另外你这个网站上貌似也存在这个问题 就是 移动端 弹出表情后 右侧出现一大片空白 你往左边一滑动就可以看到了

        2018-07-28 10:45 回复
      • Admin
        Admin Lv 1

        @mengkun你可以用手机访问试一下 弹出表情框够 手指左边滑动

        2018-07-28 10:46 回复
      • admin
        admin Lv 1

        @mengkun就是兼容性出现问题 硬是把版面给挤坏掉了

        2018-07-27 22:55 回复
分享