How to turn contentEditable into a structured markup editor?

Question

There's LyX and such editors that attempt to ensure you write text that has a distinct structure. I want same behavior from a html5 contentEditable field except I don't know how.

My requirements:

• No DIV -tags are created.
• Text is not allowed outside a text container. (paragraphs, headings, pre -blocks and inline -elements)

I also need to figure out how to traverse the content and push it to the server in that restricted form.

(I'll also love a good documentation on things I can do for a contenteditable -field)

Answer 1

Here is the DOM specification for what it means for an element to be editable: http://www.w3.org/TR/html5/editing.html#editable

It sounds like just making all the existing paragraph tags and heading tags contenteditable will give you what you want, if I understand what you're asking. If you want the user to be able to insert new paragraphs and headings, the Enter key while editing will insert line breaks as <br> tags in Chrome, but if the user types in HTML tags they'll be escaped and just show up as text. As for inserting other formatted content, that's entirely up to the user agent; my tests in Chrome show that it apparently does not allow the user to insert bold/italic/etc. text.

EDIT: apparently in Chrome (and presumably by extension, Safari as well), pressing Control-I, Control-B, Control-U cause the same behavior you might expect from a rich text editor!

I also tested in Firefox and found that, unlike Chrome and not quite contrary to the spec, it does in fact insert new <p> tags instead of <br>'s, with a _moz_dirty="" attribute added on. You shouldn't need to remove this; if Firefox follows the spec, it'll never break the DOM by inserting text outside a tag that way. But, do note that users using Chrome and Firefox will produce different HTML structures, which you might want to smooth over with Javascript or server-side sanitization... I also don't have IE available on this machine to figure out how it handles newlines, unfortunately, and Microsoft's documentation doesn't specify.

As for pushing it to the server, you can do that with AJAX by pulling the text content of the elements in question (or just make the whole <div> contenteditable), building an array of their text contents, and then POSTing it to the server. This is pretty easy to do with jQuery (further help with this can be provided for this upon request).