踩坑踩惨了 记录一下 有其他想法的欢迎留下评论

contenteditable="true" 将div变成类似textarea的存在，在div中可以编辑，不仅可以输入文字还能放图片和span等html标签

    $(document).on('keydown','#comment_replay',function(e){   
    //将回车键 换行换成空格    
     if(e.keyCode == 13 )    {        
         e.preventDefault();        
         insertHtmlAtCaret(' ')    
空格 和<>&等特殊字符

如题，这些特殊字符在div中正常显示，但是控制器中打印出来就能发现都被转义了

php的htmlspecialchars_decode的方法在转回来..
光标不显示问题

在某些标签后面，光标会被隐藏，简单百度下，貌似是标签高度和div高度导致光标看不到，没深究

在jq往div中添加html标签时，前后加上空格，就能看到 但是把标签后面的空格删掉光标又会消失了....
复制粘贴问题

在浏览器复制地址栏里面的url，粘贴到div中，url不是纯文本会变成a标签

document.getElementById('comment_replay').addEventListener('paste', function (e) 
   textFormat (e)
function textFormat (e) {    
   e.preventDefault()    
   var text    
   var clp = (e.originalEvent || e).clipboardData    
   if (clp === undefined || clp === null) {       
       text = window.clipboardData.getData('text') || ''       
       if (text !== '') {            
           if (window.getSelection) {                
               var newNode =  document.createElement('span')              
               newNode.innerHTML = text              
               window.getSelection().getRangeAt(0).insertNode(newNode)           
          } else {                
               document.selection.createRange().pasteHTML(text)           
    } else {       
       text = clp.getData('text/plain') || ''        
       if (text !== '') {            
           document.execCommand('insertText', false, text)       
在光标前面添加标签

点击一个按钮，根据光标位置，在div中插入相应的html标签

//在光标前插入数据    html：已经拼接好的html标签代码
function insertHtmlAtCaret(html) 
   //@好友和表情两个点击元素 ，必须要是按钮，否则光标的获取会出问题    
   //鼠标点击其他地方，光标也会选定过去（虽然肉眼不可见，但是打印选中元素能看出来），所以要判断目前的光标是否还在回复框内，如果不在默认选到div的最后面方便输入（光标前面如果是纯文字要判断选中的父级元素，如果是标签判断当前选中元素即可）。
   //这里使用try{}catch（）{} ，是因为如果光标不选中div直接点击按钮添加会报错，为了避免报错就try.catch 无论报错与否只要光标不在div中默认选到div的最后面
 if(!$(window.getSelection().getRangeAt(0).endContainer).parent('div').is('#comment_replay')&&!$(window.getSelection().getRangeAt(0).endContainer).is('#comment_replay'))  
        let range = document.createRange();
        range.selectNodeContents(document.getElementById('comment_replay'));            
        range.collapse(false);           
        let sel = window.getSelection();           
        sel.removeAllRanges();           
        sel.addRange(range);       
}catch(err){       
         let range = document.createRange();
        range.selectNodeContents(document.getElementById('comment_replay'));            
        range.collapse(false);           
        let sel = window.getSelection();           
        sel.removeAllRanges();           
        sel.addRange(range);    
  //插入元素
   var sel, range;    
   sel = window.getSelection();   
   if (sel.getRangeAt && sel.rangeCount) 
       range = sel.getRangeAt(0);       
       range.deleteContents();       
       var el = document.createElement("div");       
       el.innerHTML = html;       
       var frag = document.createDocumentFragment(),            node,            lastNode;       
       while ((node = el.firstChild)) {           
           lastNode = frag.appendChild(node);       
        range.insertNode(frag);       
        if (lastNode) 
               range = range.cloneRange();           
               range.setStartAfter(lastNode);            
               range.collapse(true);           
               sel.removeAllRanges();            
               sel.addRange(range);       
       document.getElementById('comment_replay').scrollIntoView(false);//元素滚动到与视口顶部齐平地方
maxlength

input中会有maxlength的属性来控制输入的数量，但是div中maxlength是无效的

通过按下键盘触发的事件和键盘码来阻止键盘输入

英文可以限制  但是复制粘贴的限制不了，输入中文限制不了，所以提交数据和控制器那块都要在另做验证
if(目前输入框的字符串数量 > 最大限制数量)
    // 小键盘  英文字母 特殊字符 的键盘码
    if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 
90) || (e.keyCode >= 96 && e.keyCode <= 111) || (e.keyCode >= 186 && e.keyCode <= 
92) || (e.keyCode >= 219 && e.keyCode <= 222))