Crear plataforma de edición de arrastrar y soltar en HTML5

Question

Estoy en el proceso de pensar cómo debo abordar esta función que quiero en mi aplicación. Básicamente, quiero que mis usuarios puedan crear páginas personalizadas, y esas páginas se guardarán para verlas más tarde. Pero, quiero tener una estructura y sentimiento unificados. También quiero que sea indoloro y muy simple. Sé que podría estar usando algo como TinyMCE, pero a veces el formateo puede ser un problema.

Aquí es un pequeño esbozo de lo que me gustaría:

Algo así como http://www.diagram.ly/ sino por el contenido del texto. Lo ideal es que, una vez que el usuario termine de editar la página, simplemente guarde el contenido en XML, con etiquetas que representen cada tipo de contenido y aplique el estilo en consecuencia una vez que se represente.

¿Es eso demasiado complicado, o algo mucho más simple ya existe? Preferiría usar HTML5 si fuera posible ... ¡pero estoy abierto a cualquier sugerencia o incluso a otras alternativas!

Gracias!

Answer 1

¿Alguna vez ha visto cleditor? Eso junto con jquery UI draggable y droppable debería permitirle hacer lo que quiera.

Lo usé en un editor de contenido liviano personalizado. Funciona muy bien Si alguna vez volviera a visitar ese proyecto, o hiciera algo similar, crearía secciones de contenido arrastrables preconfiguradas para que los neófitos de la web pudieran personalizar sus páginas aún más.

Answer 2

Miró un poco alrededor después de abrir un bounty. Tal vez usar el atom text editor para hacer un descuento y usar un markdown preview podría ser una forma de hacerlo. Entonces podría usar alguna herramienta como pandoc para convertir la marca en xml.

Sé que no es arrastrar y soltar, pero es mejor que M $ word.

Answer 3

medium-editor parece ser un clon bien administrado del editor realmente genial encontrado en Medium cuyo architectural principles are explained in here.

La solución aquí eliminaría la idea de soltar arrastrar &. En cambio, el usuario selecciona cualquier fragmento de texto y luego ve una barra de herramientas emergente, lo que les permite hacer cualquier formateo que necesiten. Eso toolbar can be customized para satisfacer las necesidades de los usuarios finales.

Al final, obtiene una cadena HTML bien formada (X) que es agradable y limpia. Para hacer tu estilo, puedes simplemente inyectar un <link rel="stylesheet" href="/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>

Answer 4

Trate hammerJS, creo que le puede ayudar a

http://hammerjs.github.io/