Create Drag and Drop Editing Platform in HTML5

Question

I am in the process of thinking how I should approach this feature that I want in my application. Basically, I want my users to be able to create custom pages, and those pages would be save to later be seen. But, I want to have a unified structure and feel. I also want it to be painless and very simple. I know I could be using something like TinyMCE, but sometimes the formatting can be a pain.

Here is a small sketch of what I would like:

Something like http://www.diagram.ly/ but for text content. Ideally, once the user is done editing the page, I would simply save the content in XML, with tags representing each content type and apply styling accordingly once being rendered.

Is that too complicated, or something much simpler already exists? I would prefer using HTML5 if possible... but I am open to any suggestions or even other alternatives!

Thanks!

Answer 1

Have you ever looked at cleditor? That in conjunction with jquery UI draggable and droppable should allow you to do what you want.

I used it in a custom lightweight content editor. Works very well. If I ever revisit that project, or do something similar I would create pre-configured draggable content sections so web neophytes could customize their pages even more.

Answer 2

Looked a bit around after opening a bounty. Perhaps using the atom text editor to make markdown and using a markdown preview could be a way to do it? Then you could use some tool like pandoc to convert the markdown to xml.

I know it is not drag and drop, but it's better than M$ word.