一个不错的前端表情插件

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

老规矩，好东西不独享。咱这就分享一下这款插件！

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

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

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

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

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

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

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

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

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

js 插件表情

发表评论取消回复

Cccp Lv 1

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

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

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

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

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

#28 2018-04-20 14:12 回复
- wierli Lv 1
  
  @hahahahaxss 还行
  
  2019-04-23 14:37 回复
hahahaha Lv 1

z 主题做的不错

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

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

#26 2018-04-17 22:28 回复
- mengkun 站长
  
  @后宫学长动手能力强就是好
  
  2018-04-17 22:36 回复
  - 后宫学长 Lv 1
    
    @mengkun其实也是因为强迫症的原因，表情候选点击上图而不是上文字，看着舒服点。
    
    2018-04-17 22:43 回复
  - mengkun 站长
    
    @后宫学长我介绍的这款插件直接就支持 DIV 编辑（像你那种），只不过博客里没有开启。因为还有插图的功能，开启后感觉会使评论编辑排版更乱
    
    2018-04-18 08:08 回复
  - 后宫学长 Lv 1
    
    @mengkun所以我的DIV只能粘贴纯文本。
    
    2018-04-18 12:19 回复
admin Lv 1

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

#25 2018-04-15 14:48 回复
- mengkun 站长
  
  @admin在 Github 上把源代码下载下来，里边有
  
  2018-04-15 14:50 回复
帮你测试一下 Lv 1

<script>while(true){alert("你好啊！");};</script>

#24 2018-04-07 17:30 回复
- mengkun 站长
  
  @帮你测试一下评论区所有的字符在输出前都作了转义处理
  
  2018-04-07 17:32 回复
  - 帮你测试一下 Lv 1
    
    @mengkun第一次应该被坑过吧？
    
    2018-04-07 17:38 回复
  - 后宫学长 Lv 1
    
    @帮你测试一下新版WP对访客html标签更加严格。
    连img标签都不支持，何况script，年轻。
    
    2018-04-17 22:42 回复
冷眼观世界 Lv 1

资瓷资瓷

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

感谢分享　~ 太好用了

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

我的饭

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

弱弱的问一句表情包有单独的下载地址吗

#20 2018-03-12 20:47 回复
- mengkun 站长
  
  @清秋暖冬你把上面的源码下载下来，表情文件在 /images/emoji/ 路径下
  
  2018-03-13 12:19 回复
  - 清秋暖冬 Lv 1
    
    @mengkun好的，谢谢了
    
    2018-03-13 17:11 回复
鸡哥 Lv 1

六六六

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

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

#18 2018-02-22 18:17 回复
- mengkun 站长
  
  @鸡哥代码中自带有使用说明 & 示例
  
  2018-02-22 18:34 回复
  - 鸡哥 Lv 1
    
    @mengkun好的哈哈哈哈
    
    2018-02-22 20:07 回复
江户川大雄 Lv 1

这些表情很好看

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

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

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

哇，前来拜访大神

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

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

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

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

赞哦

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

扎铁了，老心!

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

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

#10 2018-01-11 18:17 回复
- mengkun 站长
  
  @BanYuner可以手动把之前的表情也加到面板里来啊，具体看表情配置的那个js
  
  2018-01-11 23:22 回复
BanYuner Lv 1

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

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

滑稽警告

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

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

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

周末抽空报个到

#6 2017-12-23 09:49 回复
- mengkun 站长
  
  @广元巴士最近在忙啥子咧
  
  2017-12-23 10:51 回复
阿珏 Lv 3

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

#5 2017-12-23 09:36 回复
- mengkun 站长
  
  @阿珏不支持颜表情是这个插件目前的“缺点”之一
  其实大多数输入法都自带了颜文字输入，也没多大必要加上了（看起来找了个好借口）
  
  2017-12-23 10:48 回复
  - 阿珏 Lv 3
    
    @mengkun装上去好像发现了不得了的东西，我分页消失了，文章变成下拉加载的形式了
    
    2017-12-23 12:01 回复
  - mengkun 站长
    
    @阿珏一定是你的打开方式不对！
    
    2017-12-23 12:52 回复
龙笑天 Lv 3

评论框被我模仿走了~~ PS：评论飞了几分钟失败了....

#4 2017-12-22 15:07 回复
- mengkun 站长
  
  @龙笑天哈哈哈哈，互相借鉴~ PS：下次遇到评论飞失败了你应该截个 Console 好让我知道是哪里出了问题……
  
  2017-12-22 15:23 回复
  - 龙笑天 Lv 3
    
    @mengkun 忘了这一茬了估计是和我联通网络有关系吧... 强行帅锅联通~
    
    2017-12-22 15:26 回复
龙笑天 Lv 3

评论框被我模仿走了~~

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

好东西，谢谢分享哦

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

不错，收藏了！

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