Replace paragraph by <br /> tag in div with contenteditable

Question

How to put <br /> only in div contenteditable while user is pressing ENTER key? I must manage the content of that div in XML after send, but some browsers translate new lines as <p>, some (in example Google Chrome) as <div>.

The good solution will be force to make new lines the same in all browsers (only <p> or only <div>) too.

PS: I'm using jQuery and PHP.

Answer 1

div {white-space: pre};

'white-space' Value: normal | pre | nowrap | pre-wrap | pre-line | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: as specified

This property declares how white space inside the element is handled. Values have the following meanings:

normal This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes. pre This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content. nowrap This value collapses white space as for 'normal', but suppresses line breaks within text. pre-wrap This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes. pre-line This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

Newlines in the source can be represented by a carriage return (U+000D), a linefeed (U+000A) or both (U+000D U+000A) or by some other mechanism that identifies the beginning and end of document segments, such as the SGML RECORD-START and RECORD-END tokens. The CSS 'white-space' processing model assumes all newlines have been normalized to line feeds.

Example(s):

The following examples show what white space behavior is expected from the PRE and P elements and the "nowrap" attribute in HTML.

pre { white-space: pre } p { white-space: normal } td[nowrap] { white-space: nowrap }

Answer 2

Not sure, but note that <shift><enter> generally inserts a <br />, I belive.

I wonder if you could force a shift in onKeypress?

Answer 3

How about trapping the user keyboard event of pressing the Enter key?

Answer 4

Try this: <div contenteditable="true">test1<div></div></div>

You can force single-spacing when you hit return in a content-editable element by seeding it with an inner DIV like so: