contentEditable areas::force paragraphs for new lines - cross browsers

Question

Firefox breaks new lines with <br>, Chrome and Safari are breaking with <div>...</div> and Internet Explorer and Opera are using paragraphs <p>...</p> for new lines.

I am looking for a method to force each browser to create only paragraphs, when breaking to a new line.

I know ckeditor supports this function, but how can i realize it simply in my custom editor?

Answer 1

Try the execCommand "insertparagraph", e.g. :

document.execCommand('insertParagraph',false,'id for new p')

Alternatively you could handle the keydown event, catch keycode 13 (without modifiers) and then do whatever you like.

Corrected

Answer 2

For me was solution to add document.execCommand('formatBlock', false, 'p'); into a keypress event in the contenteditable div. For example:

element.addEventListener('keypress', function(ev){
    if(ev.keyCode == '13')
        document.execCommand('formatBlock', false, 'p');
}, false);

Hope it'll help someone. :)

Answer 3

If you want to add a new <p> after breaking to a new line, but you want to keep the formatting of the previous line in place (ie you're breaking from a <h1>), combine the answers of @MorganTiley and @PageOnline:

editor.addEventListener('keypress', function(e){
    if(e.keyCode == '13') {
      e.preventDefault();
      document.execCommand('insertParagraph', false);
      document.execCommand('formatBlock', false, 'p');
    }
  }, false);

Answer 4

You're not specific in which editor you want this function, but you mention CKEditor so I assume you are asking about it. Just add this to your config.js file:

config.enterMode = CKEDITOR.ENTER_P;