contenteditable可編輯區(qū)域設置換行實現(xiàn)技巧實例

更新時間：2024年01月23日 08:49:08 作者：TangJang

這篇文章主要為大家介紹了contenteditable可編輯區(qū)域設置換行實現(xiàn)技巧實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

contenteditable 在需要自定義插入換行符 br

1.方式一，添加換行符 br 進行換行

其中在末尾換行時需要增加兩個br，如不增加則第一次不會產(chǎn)生換行

<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();
                 // 創(chuàng)建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);
                 //創(chuàng)建新范圍
                 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;
     }