雪碧图表情包上传评论区

上传表情，不用:smile : 、[微笑]、/微笑这样的字符串转换，也不用多个图片组成li；

利用一张雪碧图，完成所有表情；

富文本编辑技术（即添加contenteditable="true"属性）。用contenteditable="true"属性把div模拟为input、textarea。

/*html页面*/
<div class="commentInDiv">
    <div id="inputBox" class="commentIn" contenteditable="true" placeholder="雁过留名，人过留声！"></div>
    <div class="commentBtn">
        <span class="nullMsg">不能发送空白信息</span>
        <i class="iconfont icon-emoji" onclick="sendEmoji(this)"></i>
        <div class="timiBtn" onclick="sendComment()">评论</div>
    </div>
    <div class="emoji" style="display: none;">
        <div class="emojiBox"></div>
    </div>
</div>

/*emoji图标点击*/
function sendEmoji(e) {
    $(".commentInDiv .emoji").css("display", "block");
    $(".commentInDivNew .emoji").css("display", "none");
    stopBubble(event);
}
/*阻止冒泡函数*/
function stopBubble(e) {
    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
}

雪碧图

 

 最终效果

 

/*雪碧图循环*/
window.onload = function () {
    let emojiEle = document.getElementsByClassName("emojiBox")[0];
    console.log(ele)
    let box;
    let i = 1;
    for (let y = 0; y < 5; y++) {//根据图的每行每列的个数，也可以随便取值
        for (let x = 0; x < 8; x++) {
            box = document.createElement("div");
            box.className = "emojiItem";
            box.style.backgroundPositionX = ~((x * 40) - 1) + 'px';
            box.style.backgroundPositionY = ~((y * 40) - 1) + 'px';
            box.id = "emo_" + i;
            emojiEle.appendChild(box);
            i++
        }
    }
}
/*动态生成表情包*/
let commentInDivNew = '<div class="commentInDivNew">' +
                '<div id="inputBoxNew" class="commentIn" contenteditable="true" placeholder="' + '回复：' + jsrNameDom + '"></div>' +
                '<div class="commentBtnNew">' +
                '<span class="nullMsgNew">不能发送空白信息</span>' +
                '<i class="iconfont icon-emoji" onclick="sendEmojiNew(this)"></i>'+
                '<div class="timiBtnNew" onclick="sendReplyComment()">评论</div>' +
                '</div>' +
                '<div class="emoji" style="display: none;">' +
                '<div class="emojiBoxNew">' +
                emojiEle.innerHTML +
                '</div>'+
                '</div>'+
                '</div>';
取emojiEle.innerHTML的值；

/*CSS*/
.emojiItem {
    width: 35px;
    height: 35px;
    background: url('../image/emoji.png');
    background-size: 400px;
    display: inline-block;
    cursor: pointer;
    padding: 2px;
}

/*出现多处表情包弹窗，点击任一处，其他弹窗隐藏*/
window.onclick = function () {
        $(".emoji").css("display", "none");
        document.onclick = null;
}

/*表情包上传到评论区*/
$(".emojiBox").on('click', ".emojiItem", function (e) {
        let imgID = $(this).attr("id");
        let imgStyle = $(this).attr("style");
        $("#inputBox").val("").focus();
        var source = '<div class="emojiItem" id="' + imgID + '" contenteditable="false" style="' + imgStyle + '"></div>';
         _insertimg(source);
    });

表情上传后的光标处理

/*光标处理*/
function _insertimg(data) {
    var selection = window.getSelection ? window.getSelection() : document.selection;
    var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
    if (!window.getSelection) {
        document.getElementById('inputBox').focus();
        var selection = window.getSelection ? window.getSelection() : document.selection;
        var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
        range.pasteHTML(data);
        range.collapse(false);
        range.select();
    } else {
        document.getElementById('inputBox').focus();
        range.collapse(false);
        var hasR = range.createContextualFragment(data);
        var hasR_lastChild = hasR.lastChild;
        while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
            var e = hasR_lastChild;
            hasR_lastChild = hasR_lastChild.previousSibling;
            hasR.removeChild(e)
        }
        range.insertNode(hasR);
        if (hasR_lastChild) {
            range.setEndAfter(hasR_lastChild);
            range.setStartAfter(hasR_lastChild)
        }
        selection.removeAllRanges();
        selection.addRange(range)
    }
}

微信聊天框样式示例

#talkbubble {
      width: 120px;
      height: 80px;
      background: red;
      position: relative;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }
#talkbubble:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 26px;
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-right: 26px solid red;
      border-bottom: 13px solid transparent;
}