contenteditable 可编辑区域设置换行

contenteditable 设置换行

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

1.第一种方式

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

其中 if (!hasNextSibling(range.endContainer)) 判断了当前选取的父内容最后一个子元素是否是br ,如果不是则增加两个br， 在结尾处如果不增加个 br ，在结尾处换行时则需要按两次enter

2.第二种 使用 document.execCommand （已废弃，但大部分浏览器仍然支持）

document.execCommand('insertLineBreak')