javaweb 处理 emoji表情

原文参考http://dditblog.com/itshare_444.html

利用Emoji Picker插件直接在input 或者textarea生成表情插件

核心代码

<div class="inner cover">
     <p class="lead emoji-picker-container">
        <input type="email" class="form-control" placeholder="输入字段" data-emojiable="true" />
    </p>

     <p class="lead emoji-picker-container">
        <textarea class="form-control textarea-control" rows="3" placeholder="文本区" data-emojiable="true"></textarea>
     </p>
</div>

$(function() {
    // Initializes and creates emoji set from sprite sheet
    window.emojiPicker = new EmojiPicker({
        emojiable_selector: ´[data-emojiable=true]´,
        assetsPath: ´lib/img/´,
        popupButtonClasses: ´fa fa-smile-o´
    });
    // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
    // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
    // It can be called as many times as necessary; previously converted input fields will not be converted again
    window.emojiPicker.discover();
});

需要引入的插件

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/public/common/emoji/css/emoji.css" rel="stylesheet">
    <link href="${ctx}/public/common/emoji/css/nanoscroller.css" rel="stylesheet">


    <script src="${ctx}/public/common/libs/jquery.min.js"></script>
    <script src="${ctx}/public/common/emoji/js/config.js"></script>
    <script src="${ctx}/public/common/emoji/js/util.js"></script>
    <script src="${ctx}/public/common/emoji/js/jquery.emojiarea.js"></script>
    <script src="${ctx}/public/common/emoji/js/emoji-picker.js"></script>
    <script src="${ctx}/public/common/emoji/js/nanoscroller.min.js"></script>

    <script src="${ctx}/public/common/emoji/js/tether.min.js"></script>

由于我们这边用的postgresql所以无需设置可以直接保存到数据库，mysql没试

接下来就是保存以后取出来怎么办

先引入<script src="jquery-2.1.4.min.js"></script>

<script type="text/javascript" src="emoji.js"></script>

这两个文件在页面(注意如果同一个页面有jquery就不要再次引入，我这边写了两次)

<div id="aa">\ud83d\ude17|\ud83d\udd38|\ud83d\udd39</div>

初始化    $(function(){
    $('#aa').emoji();

})

unicode转成emoji其实就是把unicode转化成了img的路径所以项目必然要包含所有emoji图片才行

这边的目录是这样的

demo下载地址http://download.csdn.net/download/qq_39205291/10249710