js 带表情的评论输入框问题

<div class="comment_con clearfix">
    <div class="comment_input_box">
        <!-- div 模拟input输入框　 -->
        <div type="text"  class="comment_input" contenteditable="true"  v-on:input="inputChange($event)" v-on:paste="inputPaste($event)" v-on:focus.stop="inputFocus($event)"></div>
        <!--表情按钮  -->
        <input type="button" class="emoji-wrap"  @click.stop="showEmijiBtn($event,1)" />
    </div>
    <span class="comment_btn" @click="sendComment($event)">评论</span>
    <!--表情弹窗  -->
    <div class="dynamic-emoji" v-show="isEmojiShow">
        <div id="emoji-box" class="emoji-box open">
            <span class="td-div"  v-for="(value,key) in arrEmojiList"  @click="selectEmoji($event,value,key)">
                <img class="emoji" :src="emoji_path+value" :title="key"/>
            </span> 
        </div>
    </div> 
</div>

 1.输入框粘贴处理

inputPaste: function(e) {
    var e = e || window.event;
    var clipboar = e.clipboardData || e.originalEvent.clipboardData;
    if (clipboar) {
        var text = clipboar.getData('Text');
        if (text.length > 140) {
            text = text.substr(0, 140);
            this.dialogShowFn(2, '粘贴内容过长，已截取前140字！');
        }
        String.insertAtCaret(this.curElementInput, text);
        e.preventDefault();
    }
},

2.控制字数 内部文字和表情个数

if (this.curElementInput.innerText.length + this.curElementInput.childElementCount > 140) {
    this.dialogShowFn(2, "评论内容不能超过140字");
    return false;
}

3.转换表情

readEmoji: function(message) {
    //替换信息中的 < & 空格
    var message = this.convertHtml(message, true);
    //如果有at信息，特殊显示
    //提取消息中的图片信息
    message = message.replace(/\[[^\[\]]+\]/g, function (v, i, s) { return this.arrEmojiList[v] ? ('<img class="emoji" src="' + this.emoji_path + this.arrEmojiList[v] + '">') : v }.bind(this));//新表情的解析
    return message;
}, 

4.特殊字符转换

convertHtml: function(msg, flag) {
    msg = msg + ""; //如果是数字，转为字符串
    if (flag) {
        msg = msg.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    } else {
        msg = msg.replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&');
    }
    return msg;
},

5.设置光标位置

setFocus: function(el) {
    var range = document.createRange();
  

},

6.插入字符串

// 字符串解析为DOM对象
function loadXMLString(str) {
    var div = document.createElement("div");
    if(typeof str == "string") div.innerHTML = str;
    return div.childNodes;
};

// 插入字符串DOM
function insertAtCaret(id, val) {
    //光标位置  光标在表情前面--上一个文本的结尾   光标在表情后面--输入框子节点的序号
    var selection = window.getSelection && window.getSelection();
    var anchorNode = selection.anchorNode;
    var anchorOffset = selection.anchorOffset;
    //输入框
    // var pn = document.getElementById(id);
    var pn = id;
    //选区
    var ran = selection.getRangeAt(0);
    //插入的表情
    var imgNode = loadXMLString(val)[0];
    if (anchorNode.nodeType == 3) {
        //文本中插入
        // if (selection.anchorOffset == anchorNode.nodeValue.length){
        //     //在文本结尾
        //     pn.insertBefore(imgNode ,anchorNode.nextElementSibling);
        // } else 
        if (selection.anchorOffset == 0){
            //在文本开头
            pn.insertBefore(imgNode ,anchorNode);
        } else {
            //在文本中
            //拆分后半部分文本并插入
            var n2 = document.createTextNode(anchorNode.nodeValue.substring(selection.anchorOffset));
            pn.replaceChild(n2, anchorNode);
            //在后半部分文本前插入表情
            imgNode = pn.insertBefore(imgNode, n2);
            //插入前半部分文本
            if(anchorOffset){
                var n1 = document.createTextNode(anchorNode.nodeValue.substring(0, anchorOffset));
                pn.insertBefore(n1, imgNode);
            }
        }
    }else if(anchorNode.nodeType == 1){
        //输入框子节点插入
        //在选中节点的后面一个节点，在它之前插入
        pn.insertBefore(imgNode, pn.childNodes[anchorOffset]);
    }
    //结尾表情被隐藏处理176
    if (imgNode.offsetLeft - pn.scrollLeft > 176){
        pn.scrollLeft = imgNode.offsetLeft - 176;
    }
    //设置焦点
    ran = ran.cloneRange();
    ran.setStartAfter(imgNode);
    selection.removeAllRanges();
    selection.addRange(ran);
    pn.focus();
};