如何將插入符設置爲contentEditable元素中新添加的元素？

Question

我正在編寫一個所見即所得的編輯器，我想在輸入/返回鍵時添加<p>，然後用戶將寫入這個新的<p>。

現在我有問題，設置插入到這個新的<p>。

$('#content').on('keypress', function(e){ 
 
    
 
    if(e.which === 13){ 
 
     
 
     console.log('enter pressed'); 
 
     
 
     e.preventDefault(); 
 
     
 
     var range = window.getSelection().getRangeAt(0); 
 

 
     var element = document.createElement('p'); 
 

 
     // element.textContent = 'lorem'; // gets added in the right position 
 
     
 
     range.insertNode(element); 
 
     
 
     // range.setStart(element); // doesn't work 
 
     
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id='content' contentEditable=true>test</p>

我需要在Chrome這個工作現在。

我該如何解決這個問題？

Answer 1

一個簡單的解決方案，如果你不是絕對需要的頂部contenteditable元素是一個p元素，是增加一個contenteditable DIV爲您p元素的父。回車將自動添加p元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='content' contentEditable=true><p>test</p></div>