聊天应用中的表情插件

聊天应用中的表情插件

用于Web即时聊天应用的图片表情插件，具备展现表情、插入表情和表情编解码的功能

项目地址

看代码

看demo

原理介绍

web端的即时聊天应用中看到的表情，其实就是一张张表情图片，经过img标签引用并展现在页面上。在整个聊天的流程上主要有这几个要点：

• 当用户要发送表情时，首先要显示表情列表，让用户能够从中选择要发送的表情。而后经过插入表情的功能，将表情插入到当前光标所在的位置。这里有一个小技巧，若是输入框用<input type="text">的话，是没法在输入框中显示表情图片的，这样用户没法直观的看到他想发送的表情。能够使用H5中的新特性contenteditable，使div变为可编辑状态，就能够显示表情图片了。

• 用户点击了发送以后，将输入框中的内容进行编码，用户输入框中的内容应该相似于你好啊<img src="arclist/1.gif">，编码以后会获得你好啊[em_1]，就能够将之发送或者存储。

• 当用户页面读取到聊天内容时，会获得你好啊[em_1]这样的字符串，其中[em_1]就是表情图片对应的编码，进行解码后，[em_1]会解析成<img src="arclist/1.gif">，而后直接渲染到页面中，用户就能看到对应的表情图片了。

代码注释比较详细，使用的时候能够根据项目的具体状况，作一些适当的修改。