contenteditable 在需要自定义插入换行符 br

1.方式一,添加换行符 br 进行换行,其中在末尾换行时需要增加两个br,如不增加则第一次不会产生换行

<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;
     }

2.方式二使用 document.execCommand (已废弃,但大部分浏览器仍然支持)
document.execCommand('insertLineBreak')


TangJang
9 声望1 粉丝