一个不错的前端表情插件

mengkun 40.3K 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. Cccp
    Cccp Lv 1

    <script>alert('中文');</script>

    #30 2018-06-15 01:20 回复
  2. 杨小杰博客
    杨小杰博客 Lv 1

    我在wp安装过owo的表情包，可惜我的wp站已经清空，有机会就把原来的教程放到我emlog站上

    #29 2018-04-22 12:57 回复
  3. hahahaha
    hahahaha Lv 1

    <script>alert('中文');</script>

    #28 2018-04-20 14:12 回复
  4. hahahaha
    hahahaha Lv 1

    [aru_15]z 主题做的不错

    #27 2018-04-20 14:10 回复
  5. 后宫学长
    后宫学长 Lv 1

    我用的就是OwO，img标签？那么，硬改评论输入框好了……#[滑稽]
    富文本编辑框+访客html标签。#[勉强]

    #26 2018-04-17 22:28 回复
    • mengkun
      mengkun 站长

      @后宫学长[aru_53]动手能力强就是好

      2018-04-17 22:36 回复
      • 后宫学长
        后宫学长 Lv 1

        @mengkun其实也是因为强迫症的原因，表情候选点击上图而不是上文字，看着舒服点。[aru_17]

        2018-04-17 22:43 回复
      • mengkun
        mengkun 站长

        @后宫学长我介绍的这款插件直接就支持 DIV 编辑（像你那种），只不过博客里没有开启。因为还有插图的功能，开启后感觉会使评论编辑排版更乱[aru_52]

        2018-04-18 08:08 回复
      • 后宫学长
        后宫学长 Lv 1

        @mengkun所以我的DIV只能粘贴纯文本。#(滑稽)

        2018-04-18 12:19 回复
  6. admin
    admin Lv 1

    老哥我想学加表情包，一点也不懂,教程在哪里#[泪]

    #25 2018-04-15 14:48 回复
    • mengkun
      mengkun 站长

      @admin在 Github 上把源代码下载下来，里边有

      2018-04-15 14:50 回复
  7. 帮你测试一下
    帮你测试一下 Lv 1

    [斜眼笑]<script>while(true){alert("你好啊！");};</script>

    #24 2018-04-07 17:30 回复
    • mengkun
      mengkun 站长

      @帮你测试一下评论区所有的字符在输出前都作了转义处理[aru_125]

      2018-04-07 17:32 回复
      • 帮你测试一下
        帮你测试一下 Lv 1

        @mengkun#(哈哈)第一次应该被坑过吧？

        2018-04-07 17:38 回复
      • 后宫学长
        后宫学长 Lv 1

        @帮你测试一下新版WP对访客html标签更加严格。
        连img标签都不支持，何况script，年轻。#(滑稽)#(滑稽)

        2018-04-17 22:42 回复
  8. 冷眼观世界
    冷眼观世界 Lv 1

    资瓷资瓷[aru_67]

    #23 2018-03-24 20:49 回复
  9. TaoXF
    TaoXF Lv 1

    [wb_爱你] 感谢分享　~ 太好用了

    #22 2018-03-24 20:09 回复
  10. 饿
    饿 Lv 1

    [aru_55] 我的饭

    #21 2018-03-20 15:43 回复
  11. 清秋暖冬
    清秋暖冬 Lv 1

    弱弱[aru_52]的问一句表情包有单独的下载地址吗[可怜]

    #20 2018-03-12 20:47 回复
    • mengkun
      mengkun 站长

      @清秋暖冬你把上面的 源码 下载下来，表情文件在 /images/emoji/ 路径下

      2018-03-13 12:19 回复
      • 清秋暖冬
        清秋暖冬 Lv 1

        @mengkun好的，谢谢了

        2018-03-13 17:11 回复
  12. 鸡哥
    鸡哥 Lv 1

    [aru_11][aru_2]六六六

    #19 2018-02-22 21:41 回复
  13. 鸡哥
    鸡哥 Lv 1

    能简单说下怎么用不.....

    #18 2018-02-22 18:17 回复
    • mengkun
      mengkun 站长

      @鸡哥代码中自带有使用说明 & 示例

      2018-02-22 18:34 回复
      • 鸡哥
        鸡哥 Lv 1

        @mengkun[aru_1]好的 哈哈哈哈

        2018-02-22 20:07 回复
  14. 江户川大雄
    江户川大雄 Lv 1

    [aru_3]这些表情很好看

    #17 2018-02-14 21:59 回复
  15. Chiahong
    Chiahong Lv 1

    感謝分享，有空我也要研究一下怎麼加到自己的網站

    #16 2018-02-05 23:47 回复
  16. 练习本
    练习本 Lv 1

    哇，前来拜访大神

    #15 2018-02-02 21:41 回复
  17. tangniannian
    tangniannian Lv 1

    果断进你的github下载了。。。阿鲁表情包

    #14 2018-02-01 16:48 回复
  18. 会飞的鱼
    会飞的鱼 Lv 2

    [doge][斜眼笑][托腮][小纠结][笑哭][喷血]

    #13 2018-01-29 21:34 回复
  19. 兴座
    兴座 Lv 1

    [aru_1]赞哦[aru_132]

    #12 2018-01-19 11:34 回复
  20. TONGSir
    TONGSir Lv 1

    [aru_164]扎铁了，老心!

    #11 2018-01-16 10:13 回复
  21. BanYuner
    BanYuner Lv 1

    安装了这个表情之后，之前的表情是不是就完蛋了

    #10 2018-01-11 18:17 回复
    • mengkun
      mengkun 站长

      @BanYuner可以手动把之前的表情也加到面板里来啊，具体看表情配置的那个js

      2018-01-11 23:22 回复
  22. BanYuner
    BanYuner Lv 1

    感谢分享，准备更新一波看看效果

    #9 2018-01-11 16:37 回复
  23. PrajnaSmoke
    PrajnaSmoke Lv 1

    #[滑稽] 滑稽警告

    #8 2018-01-03 17:21 回复
  24. 木一
    木一 Lv 4

    从你换主题就看上这表情了哈哈...

    #7 2017-12-24 19:19 回复
  25. 广元巴士
    广元巴士 Lv 5

    周末抽空报个到

    #6 2017-12-23 09:49 回复
  26. 阿珏
    阿珏 Lv 3

    看到好多博客都用这种类似的，一直想要个。那我就不客气拿走了[aru_151] 差个颜表情，可以加上去个。

    #5 2017-12-23 09:36 回复
    • mengkun
      mengkun 站长

      @阿珏不支持颜表情是这个插件目前的“缺点”之一[aru_40]
      其实大多数输入法都自带了颜文字输入，也没多大必要加上了（看起来找了个好借口[aru_59]）

      2017-12-23 10:48 回复
      • 阿珏
        阿珏 Lv 3

        @mengkun装上去好像发现了不得了的东西，我分页消失了，[aru_19]文章变成下拉加载的形式了[aru_39]

        2017-12-23 12:01 回复
      • mengkun
        mengkun 站长

        @阿珏一定是你的打开方式不对！[aru_8]

        2017-12-23 12:52 回复
  27. 龙笑天
    龙笑天 Lv 3

    [aru_3] 评论框被我模仿走了~~#(滑稽) PS：评论飞了几分钟 失败了....

    #4 2017-12-22 15:07 回复
    • mengkun
      mengkun 站长

      @龙笑天哈哈哈哈，互相借鉴~[aru_11] PS：下次遇到评论飞失败了你应该截个 Console 好让我知道是哪里出了问题……[wb_委屈]

      2017-12-22 15:23 回复
      • 龙笑天
        龙笑天 Lv 3

        @mengkun[委屈] 忘了这一茬了 估计是和我联通网络有关系吧... [呲牙]强行帅锅联通~

        2017-12-22 15:26 回复
  28. 龙笑天
    龙笑天 Lv 3

    [aru_3] 评论框被我模仿走了~~#(滑稽)

    地板 2017-12-22 15:06 回复
  29. 时光博客
    时光博客 Lv 1

    好东西，谢谢分享哦[可爱]

    板凳 2017-12-22 10:52 回复
  30. Me
    Me Lv 1

    不错，收藏了！

    沙发 2017-12-22 10:42 回复
分享