¿Cómo habilitar el editor de contenido como un objetivo droppable con jQuery-ui?

Question

¿Cómo habilitar el editor de contenido como un objetivo droppable con jQuery-ui?

4 ago 2011, 23:54:06

Vistas: 12.8K

Votos: 1

Estoy intentando habilitar el editor de contenido de WordPress como un área droppable usando jQuery UI drag and drop. Sin embargo, no consigo que funcione el arrastre ni que se dispare el evento drop.

¿Hay algo que me esté faltando?

<ul id="keywords">
    <li>arrastrar uno</li>
    <li>arrastrar dos</li>
    <li>arrastrar tres</li>
</ul>

jQuery("#keywords").find("li").each(function(){jQuery(this).draggable(
{ 
    helper:'clone', 
    start: function(event, ui){
        jQuery(this).fadeTo('fast', 0.5);}, 
        stop: function(event, ui) { 
            jQuery(this).fadeTo(0, 1); 
            } 
        });
    });

jQuery('#content').droppable(
{ 
    drop: function(event, ui)
    {
        alert('elemento soltado en contenido'); //NO SE EJECUTA!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE=='object')
{ 
    alert('tinyMCE está activo'); //NO SE EJECUTA!!!
    jQuery('#editorcontainer').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert('elemento soltado en editor tinyMCE'); //NO SE EJECUTA!!!
        //Añadir contenido dinámicamente
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Nuevo contenido.');
        } 
    });
}

Scott B

5.7K

jquery tinymce jquery ui

Comentarios

TinyMce no utiliza #content, eso está oculto en el fondo por así decirlo, TinyMCE crea un marco donde se gestiona el contenido, que luego se envía (o inserta) en el área de texto original. @cheesypeanut te lo ha explicado.

t31os

5 ago 2011 03:19:06

¿Por qué no se ejecuta tu jQuery cuando el documento está listo? Si lo ejecutas antes de eso, TinyMCE aún no ha hecho su trabajo...

t31os

9 ago 2011 03:01:13

Todas las respuestas a la pregunta

Comentarios

Eso fue solo un error de entrada cuando creé la pregunta. Lo he cambiado, pero ese no es el problema. Aún así no se dispara ningún evento de drop.

Scott B

5 ago 2011 00:52:54

Prueba la solución que he añadido arriba.

cheesypeanut

5 ago 2011 02:26:30

ciertamente tiene sentido, pero al menos en mis sitios de prueba (que ejecutan wordpress 3.2.1), no consigo que se dispare la alerta de drop. +1 de todas formas. He vuelto a publicar mi código por si tú o alguien más ve lo que me estoy perdiendo.

Scott B

8 ago 2011 22:50:27

Intenta declarar en la etiqueta body de TinyMCE de esta manera, funciona para mí

En tiny_mce_src.js

t.iframeHTML += '</head><body ondrop="parent.drop(event);"  " id="' + bi + '" class="mceContentBody '+ t.id +'_cl' + bc +'" onload="window.parent.tinyMCE.get(\'' + t.id + '\').onLoad.dispatch();"><br></body></html>';

En la página del editor:

    function drop(ev)
    {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            tinyMCE.execCommand('mceInsertContent',true,data);
    }
    function allowDrop(ev) {
            ev.preventDefault();
    }

    function drag(ev) {
            var html = $('#'+ev.target.id).html();
            ev.dataTransfer.setData("Text",html);
    }

Parece que usar jQuery con TinyMCE no funciona...

Toccos

21

20 nov 2012 02:02:42

cheesypeanut 286 · Accepted Answer · 2011-08-05T00:34:23Z

En el ejemplo anterior, la siguiente línea:

jQuery(".myDiv").find("li").each(function(){

debería ser:

jQuery(".keywords").find("li").each(function(){

Eso debería permitir que los elementos de la lista sean arrastrados y soltados.

Para permitir que los elementos se solten en el área de texto de TinyMCE, el siguiente código funciona.

$('#editorcontainer').droppable({ 
    drop: function(event, ui) { 
        alert('soltó'); //¡AHORA SE EJECUTA!
        //Añadir contenido dinámicamente
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Nuevo contenido.');
    } 
});

cheesypeanut

286

5 ago 2011 00:34:23