如何将插入符号设置为contentEditable元素中的新添加元素？

Question

I am working on a WYSIWYG editor in which I want to add <p> 's when hit Enter / Return key and then the user will write to this new <p> .

Right now I am having issue setting the caret to this new <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> 

I need to get this working in Chrome for now.

How do I fix this?

Answer 1

A simple solution if you don't absolutely need the top contenteditable element to be a p element, is to add a contenteditable div as parent of your p element. Enter will automatically add p elements.

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