Insert newline on enter key in contenteditable div

Question

I am trying to insert a newline character instead of whatever the browser wants to insert when I press enter in a contenteditable div.

My current code looks somethin

Answer 1

this works in IE 11 and chrome for me

if(getSelection().modify) {     /* chrome */
  var selection = window.getSelection(),
    range = selection.getRangeAt(0),
    br = document.createTextNode('\n');
  range.deleteContents();
  range.insertNode(br);
  range.setStartAfter(br);
  range.setEndAfter(br);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);       /* end chrome */
} else {
  document.createTextNode('\n');    /* internet explorer */
  var range = getSelection().getRangeAt(0);
  range.surroundContents(newline);
  range.selectNode(newline.nextSibling);   /* end Internet Explorer 11 */
}

sorry for how unorganized it is. I used getSelection().modify to determine if it was ie or not because IE doesn't have modify for some reason.

Answer 2

Try this:

document.execCommand('insertHTML', false, '<br><br>');

Even undo\redo work :)

Answer 3

something like this?

if(e.which==13){
    e.preventDefault();
    $('#divID').html($('#divID').text()+"<br />");
}