0

I've got a contenteditable div:

<div id="result" class="content" contenteditable="true"><p><br/></p></div>

I want new paragraphs to form when I press ENTER, and for that I intercept ENTER keydown and replace the default action by the insertion of a html code:

$(".content").on("keydown",function(e){if(e.which == 13) { e.preventDefault(); pasteHtmlAtCaret("</p><p><br/>");}});

My hope was that when I press ENTER, the </p><p><br/> would close the existing paragraph and open a new paragraph. So, if I typed: 'hello world' + ENTER, I should have:

<p>hello world</p><p><br/></p>

where you can recognize the </p><p><br/> piece. I observe a different behaviour though. I get:

<p>hello world<p></p><p><br></p></p>

So it seems that the first</p> has spawned an opening <p> tag and that the <p> just before the <br/> tag has spawned a matching closing p tag. Does that mean that my browser ignores the existence of a wrapping <p></p>? How can I avoid the spawning a new p tags when I insert my little piece of html code?

I'm using Chromium and jQuery 1.7.2.

cedricbellet
  • 148
  • 2
  • 12
  • 1
    I wonder if this has anything to do with the behavior I observed here: http://stackoverflow.com/questions/11570902/why-does-a-stray-closing-p-tag-generate-an-empty-paragraph – BoltClock Nov 17 '12 at 14:09
  • Yes I think you're right. They say though that a p element will be created "if the tag can't be matched with an existing

    tag." and in my case there's this wrapping

    which I thought could work it out!     – cedricbellet Nov 17 '12 at 14:18

1 Answers1

2

Editing occurs in a document object model (DOM). The HTML tags don't really exist in the editor. The HTML is parsed into a DOM. The HTML tags are produced again when the DOM is serialized. Therefore, improper HTML fragments cannot be pasted without consequences.

Doug Domeny
  • 4,410
  • 2
  • 33
  • 49
  • Thank you Doug. I am not 100% sure that I understand the process of DOM serialization. Do you say there is no way of pasting my code fragment as such? Could there be a workaround with a jQuery function like $.append? – cedricbellet Nov 17 '12 at 14:39
  • If you _really_ need to work with the HTML, you need to serialize the DOM (e.g., using `innerHTML` or jQuery `.html()`) and process the HTML as a string. In your example, however, you should be able to let the native behavior insert new paragraphs. Another option is to allow the browser to insert what it will and then transform the tags (e.g., BR to P) when saving the HTML rather than trying to get the tags you want while editing. – Doug Domeny Nov 17 '12 at 14:58
  • There are numerous similar SO posts: [how to change behavior...](http://stackoverflow.com/questions/2735672/how-to-change-behavior-of-contenteditable-blocks-after-on-enter-pressed-in-vario) , [contentEditable - Firefox
    tag](http://stackoverflow.com/questions/5705580/contenteditable-firefox-br-tag) , [How to force
    line break](http://stackoverflow.com/questions/7901350/how-to-force-br-line-break-in-firefox-contenteditable)     – Doug Domeny Nov 17 '12 at 14:58
  • and more... [avoid ie contentEditable element to create paragraphs on Enter key](http://stackoverflow.com/questions/2057881/avoid-ie-contenteditable-element-to-create-paragraphs-on-enter-key) , [Force IE contentEditable element to create line breaks](http://stackoverflow.com/questions/2220939/force-ie-contenteditable-element-to-create-line-breaks-on-enter-key-without-bre). This last post shows how to seed the content with DIV or P tags to persuade the browser to continue using DIV or P tags when the Enter key is pressed. – Doug Domeny Nov 17 '12 at 15:02