带表情的评论

作者: AdrianRD | 来源:发表于2016-12-02 17:23 被阅读108次

完整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;
    
    
}

带表情的评论

效果展示

注意

以下是这个demo的主要代码

html

js

css

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

Web 前端开发