How to implement break lines and paragraphs on contenteditable?

Question

I’m building a simple text editor for Safari only. I need to implement a very specific behavior:

First enter - Creates <br> tag

Second enter (after <br>) - Create new paragraph

I’m already listening for enter on keypress event and using formatBlock to format paragraphs. How can I check if element before caret is a <br> element, so I can use formatBlock?

By default, Safari adds <div><br></div> on enter keypress, so I need to use preventDefault for first enter too. (code above)

I create new paragraphs using:

$("#content").live("keypress", function(e){
    if (e.which == 13) {
        document.execCommand("formatBlock", false, "p"); 
    }
});

I can add br's using: ( Make a <br> instead of <div></div> by pressing Enter on a contenteditable )

if (window.getSelection) {          
    var selection = window.getSelection(),              
        range = selection.getRangeAt(0),              
        br = document.createElement("br");          
    range.deleteContents();          
    range.insertNode(br);
    range.setStartAfter(br);
    range.setEndAfter(br);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
    return false; 
}

UPDATE: User is typing a paragraph like this: <p>This is my paragraph</p>. At enter keypress, code should be <p>This is my paragraph<br></p> (cursor after br). Pressing enter for second time should result on <p>This is my paragraph</p><p></p> (cursor on second paragraph)

See the code in my answer below. Let me know if you want me to add explanations. — Chandranshu, Nov 19 '13 at 21:47

score 1 · Answer 1 · answered Nov 19 '13 at 21:31

1

You could use keydown, for example:

<div id="textarea"></div>

Then in your script file:

document.getElementById("textarea").addEventListener("keydown",function(e){if(e.keyCode == 32) {ocument.getElementById("textarea").innerHTML+="<br />"} })

And your other stuff

answered Nov 19 '13 at 21:31

bren

4,176
3
28
43

1

this piece of code always insert br at end of textarea. What if user cursor is at beginning or middle of text? Also, how can I check if previous element is a br, so I can create new paragraph? – Renan Protector Nov 19 '13 at 21:34

score 1 · Answer 2 · answered Nov 19 '13 at 21:46

1

DISCLAIMER: This is tested only on Chromium.

var sel = window.getSelection();
var range = sel.getRangeAt(0);
if ((sel.extentNode.previousElementSibling instanceof HTMLBRElement)
     && range.startOffset == 0)
{
     // Do your magic to start a paragraph.
} else {
     // Your existing code to add a <br> element since there is no <br> before it.
}

answered Nov 19 '13 at 21:46

Chandranshu

3,669
3
20
37

It's not working :( previousElementSibling for me it's DOMHTMLHeadElement. I think that't happening because my contenteditable element is BODY – Renan Protector Nov 19 '13 at 22:06
So, if the previousElementSibling is DOMHTMLHeadElement, it means you've not yet inserted the
node and you should go into the else clause and insert it. Once you insert that, it'll become the previous element of the current text node. Hitting enter again will give you the HTMLBRElement as the previous node. – Chandranshu Nov 19 '13 at 22:08
`This is a test

After break line

` that's html inside and cursor position - rangeStart: 15 rangeEnd: 15 – Renan Protector Nov 19 '13 at 22:12
Which browser are you testing in and where is the caret when the start and end are reported as 15? – Chandranshu Nov 19 '13 at 22:18
I have created a fiddle with your original code here: http://jsfiddle.net/DQHKc/. You are creating a
node within a
node when the user presses enter. I think that is messing up the later code as well.
– Chandranshu Nov 19 '13 at 22:29
@RenanProtector - Apparently, you don't need to do much for webkit browsers. Just add `document.execCommand('defaultParagraphSeparator', false, 'p');` at the beginning of your javascript. – Chandranshu Nov 19 '13 at 22:54
Sorry for delay. Actually I really need to have
inside
node. User should be able to break lines within paragraphs and only open another paragraph at second enter. `defaultParagraphSeparator` works like `formatBlock` one, so it doen't help :(
– Renan Protector Nov 20 '13 at 02:27
This has turned into a much more interesting question than the one I originally started to answer. Can you summarize your requirements in the question in one block of updates? – Chandranshu Nov 20 '13 at 04:21
Added expected result. Thanks for your help :) – Renan Protector Nov 20 '13 at 13:46
It looks like I totally misunderstood your requirements earlier. You want to remove the previously entered `
` when the user hits enter again, start a new paragraph and place the caret within the new paragraph. – Chandranshu Nov 20 '13 at 16:28

How to implement break lines and paragraphs on contenteditable?

2 Answers2