Create Drag and Drop Editing Platform in HTML5
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!
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.
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.
medium-editor seems to be a well-managed clone of the really great editor found on Medium whose architectural principles are explained in here.
The solution here would do away with the drag & drop idea. Instead, the user selects any bit of text and then sees a toolbar pop up, allowing them to do any formatting they need. That toolbar can be customized to suit your end-users’ needs.
In the end, you get a well-formed (X)HTML string that’s nice and clean. In order to do your styling, you could simply inject a <link rel="stylesheet" href="https://stackoverflow.com/some/file.css" />.
http://jsfiddle.net/sean9999/ut7mk5x5/6/
;(function(w,d,undeinfed){
"use strict";
d.addEventListener('DOMContentLoaded',function(){
var e = d.querySelector('.editable'); // editable div
var o = d.querySelector('#o'); // debug output
var f = d.querySelector('#f'); // form
var editor = new MediumEditor(e);
var saveDocument = function(htmlfragments){
var article="<article>" + htmlfragments + '</article>';
// issue an AJAX call with "article" as the payload
alert( article.replace(/\s{2,}/g,'') );
};
f.addEventListener('submit',function(ev){
ev.preventDefault();
saveDocument(e.innerHTML);
});
editor.subscribe('editableInput', function (event, editable) {
o.textContent = e.innerHTML;
});
o.textContent = e.innerHTML;
});
})(window,document);h1 {
color: gray;
font-size: small;
}
article {
border: 3px dotted rgba(255,0,0,.2);
background-color: rgba(0,0,0,.0333);
padding: 1em;
}
button {
font-size: bigger;
padding: .5em;
margin: .5em;
}
.editable {
outline: none;
}
output {
border: 3px dotted rgba(0,0,255,0.25);
margin-top: 1em;
min-height: 5em;
display: block;
padding: 1em;
font-family: Verdana;
font-size: 10px;
}<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/medium-editor.css" rel="stylesheet"/>
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/themes/default.css" rel="stylesheet"/>
<link href="http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<section>
<article>
<div class="editable">
<h2>Edit me, I'm a heading.</h2>
<p>Edit me too, Chambray letterpress Godard meh, Echo Park slow-carb post-ironic whatever farm-to-table. Sriracha disrupt retro 90's, quinoa deep v Vice migas freegan pickled tattooed. Fashion axe meggings small batch, scenester Carles banh mi Shoreditch salvia.</p>
</div>
</article>
</section>
<form name="f" id="f" action="#">
<button type="submit">save the document</button>
</form>
<output for="f" id="o"></output>Try hammerJS, I think it can help you
