带表情的评论

完整demo下载

效果展示

注意

在将编辑好的含有表情的字符串存入数据库之后，可能由于编码格式及转义等原因，导致取回的字符串有所改变，存入数据和取出数据的时候需要需要做一些字符串的处理。

以下是我在项目中遇到问题的解决方案（你可能和我遇到的问题不同，仅作参考）
存入

//将 " 替换成一串特殊的字符串（确保不会和输入重复）
var str = str.replace(/"/g, "147852");  
//将 / 替换成一串特殊的字符串（确保不会和输入重复）
var str = str.replace(/\//g, "147833");

取出

//对 " 的还原
buff.detail = buff.detail.replace(/147852/g, '"');
//对 / 的还原
buff.detail = buff.detail.replace(/&lt;/g, '<'); 
//对 / 的还原
buff.detail = buff.detail.replace(/147833/g, "/");  
//对 = 的还原
buff.detail = buff.detail.replace(/＝/g, "=");

以下是这个demo的主要代码

完整demo下载

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="css/A-emoji.css"/>

    <style type="text/css">
        .box{
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
        }
        #display{
            height: 500px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="display">
        <div class="commentBox">
            <div class="li">
                <div class="icon">
                    <img src="img/AcFun/1.png"/>
                </div>
                <div class="content">
                    <div class="name">
                        adrian
                    </div>
                    <div class="time">
                        一小时前
                    </div>
                    <div class="text">
                        UISDGUIGV我就偶尔开发票【qweko-fqwekoifhwejhfiwejfo就我破防奇偶未交卡佛尔
                    </div>
                </div>
            </div>
            
            <div class="li">
                <div class="icon">
                    <img src="img/AcFun/1.png"/>
                </div>
                <div class="content">
                    <div class="name">
                        adrian
                    </div>
                    <div class="time">
                        一小时前
                    </div>
                    <div class="text">
                        UISDGUIGV我就偶尔开发票【qweko-fqwekoifhwejhfiwejfo就我破防奇偶未交卡佛尔
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="box">
        <!--<div class="InputBox">     
            <div class="input">     
                <div contenteditable="true" class="text"></div>                      
              <div class="btnGroup">

                
                <button data="emoji" class="btn" style="bottom: 0;right: 30px;">表情</button>
                <button data="confirm" class="btn" style="bottom: 0;right: 0px;">确定</button>
              </div>     
            </div> 
            <div class="emojiBox">
                <section class="emoji_container">
                </section>
        </div>      -->
    </div>

    
    
    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <!--<script src="js/myemojiPl.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="js/A-emoji.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript">
        var e = A_Emoji($('.box'));
        for(var i=0;i<10;i++){
            addRow();
        }
    </script>
</body>
</html>

js


function A_Emoji($box,fn){
    var _box = $box;
    
    var html = '';
    html += '<div class="InputBox">';
    html += '<div class="input">';     
    html += '<div contenteditable="true" class="text"></div>';                      
    html += '<div class="btnGroup">';
    html += '<div data="emoji" class="btn" style="left:0"><img src="img/biaoqing.png"/></div>'
    html += '<div data="confirm" class="btn" style="right:8px"><img src="img/huiche.png"/></div>'
    html += '</div>';       
    html += '</div>'; 
    html += '<div class="emojiBox">';
    html += '<section class="emoji_container">';
    html += '</section>';
    html += '</div>';    
    html += '</div>';       
    _box.append($(html));
    
    var defaults = {
        emojiconfig: {
            tieba: {
                name: "贴吧表情",
                path: "img/tieba/",
                maxNum: 50,
                file: ".jpg",
                placeholder: ":{alias}:",
                alias: {
                    1: "hehe",
                    2: "haha",
                    3: "tushe",
                    4: "a",
                    5: "ku",
                    6: "lu",
                    7: "kaixin",
                    8: "han",
                    9: "lei",
                    10: "heixian",
                    11: "bishi",
                    12: "bugaoxing",
                    13: "zhenbang",
                    14: "qian",
                    15: "yiwen",
                    16: "yinxian",
                    17: "tu",
                    18: "yi",
                    19: "weiqu",
                    20: "huaxin",
                    21: "hu",
                    22: "xiaonian",
                    23: "neng",
                    24: "taikaixin",
                    25: "huaji",
                    26: "mianqiang",
                    27: "kuanghan",
                    28: "guai",
                    29: "shuijiao",
                    30: "jinku",
                    31: "shengqi",
                    32: "jinya",
                    33: "pen",
                    34: "aixin",
                    35: "xinsui",
                    36: "meigui",
                    37: "liwu",
                    38: "caihong",
                    39: "xxyl",
                    40: "taiyang",
                    41: "qianbi",
                    42: "dnegpao",
                    43: "chabei",
                    44: "dangao",
                    45: "yinyue",
                    46: "haha2",
                    47: "shenli",
                    48: "damuzhi",
                    49: "ruo",
                    50: "OK"
                },
                title: {
                    1: "呵呵",
                    2: "哈哈",
                    3: "吐舌",
                    4: "啊",
                    5: "酷",
                    6: "怒",
                    7: "开心",
                    8: "汗",
                    9: "泪",
                    10: "黑线",
                    11: "鄙视",
                    12: "不高兴",
                    13: "真棒",
                    14: "钱",
                    15: "疑问",
                    16: "阴脸",
                    17: "吐",
                    18: "咦",
                    19: "委屈",
                    20: "花心",
                    21: "呼~",
                    22: "笑脸",
                    23: "冷",
                    24: "太开心",
                    25: "滑稽",
                    26: "勉强",
                    27: "狂汗",
                    28: "乖",
                    29: "睡觉",
                    30: "惊哭",
                    31: "生气",
                    32: "惊讶",
                    33: "喷",
                    34: "爱心",
                    35: "心碎",
                    36: "玫瑰",
                    37: "礼物",
                    38: "彩虹",
                    39: "星星月亮",
                    40: "太阳",
                    41: "钱币",
                    42: "灯泡",
                    43: "茶杯",
                    44: "蛋糕",
                    45: "音乐",
                    46: "haha",
                    47: "胜利",
                    48: "大拇指",
                    49: "弱",
                    50: "OK"
                }
            }
            //, AcFun: {
            //  name: "AcFun表情",
            //  path: "img/AcFun/",
            //  maxNum: 54,
            //  file: ".png"
            // }
        },
//      postFunction: function() {
//          alert(InputText.html());
//          console.log(InputText.html());
//      }
    };
    var _emojiBox = _box.find('.emojiBox');
    var emojiconfig = defaults.emojiconfig;
    var InputText = _box.find('.text');
    var emojiBox = _box.find('.emojiBox');
    var imgBtn = _box.find('[data="emoji"]');
    imgBtn.click(
        function() {
            var emojiContainer = _emojiBox.find('.emoji_container');
            if (emojiContainer.children().length <= 0) {
                _emojiBox.css({
                    display: 'block'
                });
                for (var emojilist in emojiconfig) {
                    emojiContainer.append('<section class="for_' + emojilist + '"></section>');
                    for (var i = 1; i <= emojiconfig[emojilist].maxNum; i++) {
                        if (emojiContainer.find('.for_' + emojilist) !== undefined) {
                            emojiContainer.find('.for_' + emojilist).append('<a href="#!" class="_img"><img src="' + emojiconfig[emojilist].path + i + emojiconfig[emojilist].file + '" alt="" data-alias="'+(emojiconfig[emojilist].alias == undefined ? (i+emojiconfig[emojilist].file) : emojiconfig[emojilist].alias[i])+'" title="' + (emojiconfig[emojilist].title == undefined ? '' : emojiconfig[emojilist].title[i]) + '" /></a>');
                        }
                    }
                }
                _emojiBox.find('.emoji_container section')[0].style.display = 'block';
                _emojiBox.find('.emoji_container ._img').on('click', function() {
                    if (InputText[0].nodeName === 'DIV') {
                        InputText.append(this.innerHTML);
                    } else {
                        InputText.append('[' + $(this).find('img').attr('data-alias')+']');
                    }
                });
            }else{
                _emojiBox.toggle();
            }
        }
    );

    _box.find('[data="confirm"]').on('click', function(){

        addRow({detail:InputText.html()});
        if(fn){fn();}
    });
    
    $(document).on('click', function(e) {
        if ((_emojiBox.find($(e.target)).length) <= 0 && (_box.find($(e.target)).length <= 0)) {
            _emojiBox.hide();
        }
    });
        
}


function addRow(o){
    console.log();
    var html = '';
    html += '<div class="li">';
    html += '<div class="icon">';
    html += '<img src="';
    html += 'img/AcFun/1.png';
    html += '"/>';
    html += '</div>';
    html += '<div class="content">';
    html += '<div class="name">';
    html += 'adrian';
    html += '</div>';
    html += '<div class="time">';
    html += '一小时前';
    html += '</div>';
    html += '<div class="text">';
    html += o.detail;
    html += '</div>';
    html += '</div>';
    html += '</div>';
    
    var li = $(html);
    console.log(o.detail);
    $('.commentBox').append(li);
}

css

.InputBox {
    /*max-width: 495px;*/
    width: 100%;
    bottom: 0;
    background: #f2f0f2;
    border-top: 2px solid #bbbbbb;
   
    padding: 8px;
}

.InputBox .input {
    position: relative;
    width: 100%;
    min-height: 30px;
    /*max-height: 30px;*/
   
    /*border: 1px solid #ccc;*/
    /*transition: border linear .2s, box-shadow linear .5s;*/
    /*-moz-transition: border linear .2s, -moz-box-shadow linear .5s;*/
    /*-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;*/
    /*-moz-border-radius: 5px;*/
    /*-webkit-border-radius: 5px;*/
    /*border-radius: 5px;*/
    /*background-color: #fff;*/
    overflow: hidden;
    /*-moz-box-shadow: 0 0 5px #ccc;*/
    /*-webkit-box-shadow: 0 0 5px #ccc;*/
    /*box-shadow: 0 0 5px #ccc;*/
}

.InputBox .text {
    -webkit-user-select: auto;
    float: left;
    width: 79%;
    min-height: 30px;
    max-height: 70px;
    
    overflow-y: auto;
    /*padding: 5px;*/
    /*outline: none;
    border: 0px solid #fff;
    resize: none;
    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;*/
   
    border: 1px solid #bbbbbb;
    border-radius: 10px;
    background: #ffffff;
}

.InputBox .btnGroup {
    position: absolute;
    right: 0;
    /*float: right;*/
    width: 19%;
    height: 35px;
    /*border-top: 1px solid #ccc;*/
    /*background-color: #fff;*/
    /*-moz-border-radius: 0 0 5px 5px;*/
    /*-webkit-border-radius: 0 0 5px 5px;*/
    /*border-radius: 0 0 5px 5px;*/
    /*position: relative;*/
    /*bottom: 0;*/
}
.InputBox .btn{
    position: absolute;
    /*width: 30px;*/
    /*height: 30px;*/
    width: 40%;
    padding: 0;
    margin: 0;
}
.InputBox .btn img{
    width: 30px;
}

.emojiBox {
    width: 95%;
    border: 1px solid gray;
    position: relative;
    display: none;
    background-color: #fff;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.emojiBox> .emoji_container >section >._img img {
    /*border: 1px solid #ccc;*/
    float: left;
    max-width: 48px;
    max-height: 48px;
    margin-left: -1px;
    margin-top: -1px;
    position: relative;
    cursor: pointer;
}

.emojiBox>img:hover {
    background-color: #efefef;
}

.emojiBox>img:active {
    padding: 4px 3px 2px 3px;
}

.emoji_tab {
    position: relative;
    border-top: 1px solid gray;
    height: 2em;
    line-height: 2em;
    white-space: nowrap;
    overflow-x: auto;
    bottom: 0;
    left: 0;
    right: 0;
}

.emoji_tab a {
    display: inline-block;
    text-decoration: none;
    height: 1em;
    line-height: 1em;
    padding: .2em .5em;
    background-color: gray;
    box-shadow: 1px 1px 3px gray;
    border-radius: 5px;
    margin: 0 .2em;
}

.emoji_container {
    height: 130px;
    padding: .5em;
    overflow: auto;
}

.emoji_container section {
    display: none;
}

._img {
    width:
}

.active {
    background-color: black;
    color: white;
}









/*评论显示区*/

.commentBox{
    
}

.commentBox .li{
    padding: 5px;
    /*position: relative;*/
     display: -webkit-flex;
      /*display: table;*/
    border-bottom: 1px solid #f2f4f5;
}

.commentBox .icon{
    display: table-cell; 
    /*position: absolute;*/
    /*left: 0;*/
    /*width: 100px;*/
    width: 60px;
    /*float: left;*/
    /*height: 100%;*/
    
}
.commentBox .icon img{
    margin: 10px;
    width: 30px;
    border-radius: 30px;
    border: 1px solid #BBBBBB;
}

.commentBox .content{
    display: table-cell; 
    width: auto;
    /*position: absolute;*/
    /*float: right;*/
    /*width: 80%;*/
    /*right: 0;*/
    /*top: 0;*/
}

.commentBox .name{
    color: #acb0b3;
    font-family: "微软雅黑";
    font-size: 16px;
    margin-top: 8px;
    
}

.commentBox .time{
    margin-top: 2px;
    font-family: "微软雅黑";
    color: #d6d8da;
    font-size: 10px;
}

.commentBox .text{
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: "微软雅黑";
    color: #656b70;
    
    
}

最后编辑于：2017.12.04 21:50:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,189评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,577评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,857评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,703评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,705评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,620评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,995评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,656评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,898评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,639评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,720评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,395评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,982评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,953评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,195评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,907评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,472评论 2赞 342

带表情的评论

效果展示

注意

以下是这个demo的主要代码

html

js

css

推荐阅读更多精彩内容