可视化html5代码编辑拖拽,在HTML5中创建拖放编辑平台(示例代码)

;(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 = '' + htmlfragments + '';

// 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;

}

Edit me, I'm a heading.

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.

save the document

另一答案

试试hammerJS，我认为它可以帮到你