contenteditable可编辑区域设置换行实现技巧实例

<div
   class="inputContent scroll"
   contenteditable="true"
   @keydown="inputContent_keydown"
></div>

function inputContent_keydown(e) {
        // 1.快捷键判断 回车加ctrl
         if( e.keyCode==13 && e.ctrlKey) { 
           
                 if (document.selection) {//IE9以下
                 document.selection.createRange().pasteHTML(content);
             } else {
                 let doc_fragment = document.createDocumentFragment();
                 // 创建br
                 let new_ele = document.createElement('br');
                 doc_fragment.appendChild(new_ele);
                 // 获取当前选择
                 let range = window.getSelection().getRangeAt(0);
                 range.deleteContents();
                 // 判断是否是最后一个元素如果是多加一个
                 if (!hasNextSibling(range.endContainer) && range.startOffset  == range.startContainer.length) {
                     let extra_break = document.createElement('br');
                     doc_fragment.appendChild(extra_break);
                 }
                 range.insertNode(doc_fragment);
                 //创建新范围
                 range = document.createRange();
                 range.setStartAfter(new_ele);
                 range.collapse(true);
                 //插入
                 let sel = window.getSelection();
                 sel.removeAllRanges();
                 sel.addRange(range);
             }
         }
     }
  
  function hasNextSibling(node) {
         if (node.nextElementSibling) {
             return true;
         }
         while (node.nextSibling) {
             node = node.nextSibling;
             if (node.length > 0) {
                 return true;
             }
         }
         return false;
     }