基于jQuery的emoji表情插件

基于jQuery的emoji表情插件

 

该项目基于webpack进行开发，过程中在网上找了很多资料，并加以整合，在这里谢谢各位大佬

 

基本介绍：

 

项目效果：

 

在线演示：demo

 

 

• 下载该插件：emoji_jQuery

 

• 引入该插件：

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

<script src="emoji_jQuery.min.js"></script>

注意：该插件依赖与jQuery3.3.1版本，要使用首先引入jQuery才行。

 

• 使用方法：

<div id="test"></div>
<div id="div-emoji">
    <p>
        <input id="input" type="text">
    </p>
    <p>
        <button id="send">发送</button>
        <button id="btn">emojiBtn</button>
    </p>
</div>

$.Lemoji({
    emojiInput: '#input',
    emojiBtn: '#btn',
    position: 'LEFTBOTTOM',
    length: 8,
    emojis: {
        qq: {path: 'static/images/qq/', code: ':', name: 'QQ表情'},
        tieba: {path: 'static/images/tieba', code: ';', name: "贴吧表情"},
        emoji: {path: 'static/images/emoji', code: ',', name: 'Emoji表情'}
    }
});

• 解析表情字符：

$('#send').click(function () {
    var content = $('#input').val();
    content = $.emojiParse({
        content: content,
        emojis: [{type: 'qq', path: 'static/images/qq/', code: ':'}, {
            path: 'static/images/tieba/',
            code: ';',
            type: 'tieba'
        }, {path: 'static/images/emoji/', code: ',', type: 'emoji'}]
    });
    $('#test').html(content);
});

 

 

具体请看github：地址

如有错误，请指出来，我进行改正，项目里的图片均来自网络，侵权则联系删除

 

 

---