Contenteditable div Enter issue (keyCode 13)

Question

Enter in the Contenteditable "div" tag makes it creates a new "div" tag. How can I do so that it instead creates a "p", if you hit enter after an "img" tag?

<div id="append_id" contenteditable="true">
  This text can be edited by the user.
    <img style="height:100px;" src="myImage.jpg" />
</div>

http://jsfiddle.net/3uTmW/3/

This is an duplicate, [check out this link](http://stackoverflow.com/questions/6023307/dealing-with-line-breaks-on-contenteditable-div) — Arko Elsenaar, Feb 19 '14 at 08:54
If, you've a code for creating the `img` element, you could create a `p` element within the same code... — Teemu, Feb 19 '14 at 09:08
Teemu: If a user clicks the enter but do nothing else it's a bit silly to have p where — eriksv88, Feb 19 '14 at 09:11
Arko Elsenaar: Thank you, that I had not seen, but it has no answer marked as answer. I naturally want to have the least amount of code for this. Pluss i want ONLY trigger this AFTER a IMG tag or on a IMG tag. — eriksv88, Feb 19 '14 at 09:12

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

The default paragraph can be specified in chrome by using:

document.execCommand('defaultParagraphSeparator', false, 'p')

See how to change behavior of contenteditable blocks after on enter pressed in various browsers.

edited May 23 '17 at 12:13

Community

1
1

answered Mar 12 '14 at 12:15

Sense545

494
4
14

Contenteditable div Enter issue (keyCode 13)

1 Answers1