javascript - example - Crear la plataforma de edición de arrastrar y soltar en HTML5

drag and drop jquery ejemplos

Question

Estoy en el proceso de pensar cómo debo abordar esta función que deseo 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 adelante. Pero, quiero tener una estructura unificada y sentir. También quiero que sea indoloro y muy simple. Sé que podría estar usando algo como TinyMCE, pero a veces el formato puede ser un dolor.

Aquí hay un pequeño bosquejo de lo que me gustaría:

Algo así como http://www.diagram.ly/ pero para contenido de texto. Idealmente, una vez que el usuario haya terminado de editar la página, simplemente guardaría el contenido en XML, con etiquetas que representan cada tipo de contenido y aplicaría el estilo en consecuencia una vez que se haya procesado.

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

¡Gracias!

Answer 1

¿Alguna vez has mirado al cleditor ? Esto, junto con jquery UI draggable y droppable , le permitirá hacer lo que quiera.

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

Answer 2

Intenta hammerJS, creo que puede ayudarte

http://hammerjs.github.io/

Answer 3

Miró un poco alrededor después de abrir una recompensa. ¿Tal vez usar el editor de texto atom para hacer rebajas y usar una vista previa de rebajas podría ser una forma de hacerlo? Entonces podrías usar alguna herramienta como pandoc para convertir el markdown a xml.

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

Answer 4

medium-editor parece ser un clon bien administrado del gran editor encontrado en Medium cuyos principios arquitectónicos se explican aquí .

La solución aquí eliminaría la idea de arrastrar y soltar. En su lugar, el usuario selecciona cualquier bit de texto y luego ve una barra de herramientas emergente, lo que le permite hacer cualquier formato que necesite. Esa barra de herramientas se puede personalizar para satisfacer las necesidades de sus usuarios finales.

Al final, obtienes una cadena HTML (X) bien formada que es agradable y limpia. Para hacer su estilo, simplemente puede 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>