可编辑的div 踩得的各种坑...

 

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

---

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

• contenteditable 这个属性是会被子元素继承的

回车问题

div中按回车键，如果光标前面有html标签就会在该标签外面包上一层div再加上<br >,如果没有html标签则会显示<div></div><br >，会影响数据处理

办法
jq阻止回车键的换行功能，变为空格

 

    $(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的最后面
  try{
  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))    
    {        
        e.preventDefault();   
     }
 }

​