Come abilitare l'editor di contenuti come target droppable con jQuery-ui?

Question

Come abilitare l'editor di contenuti come target droppable con jQuery-ui?

4 ago 2011, 23:54:06

Visualizzazioni: 12.8K

Voti: 1

Sto cercando di abilitare l'editor di contenuti di WordPress come area droppable utilizzando il drag and drop di jQuery UI. Tuttavia, non riesco a far funzionare il drag to drop né a far scattare l'evento di drop.

Mi sto perdendo qualcosa?

<ul id="keywords">
    <li>trascina uno</li>
    <li>trascina due</li>
    <li>trascina tre</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('rilasciato nel contenuto'); //NON VIENE ESEGUITO!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE=='object')
{ 
    alert('tinyMCE è attivo'); //NON VIENE ESEGUITO!!!
    jQuery('#editorcontainer').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert('rilasciato nell\'editor tinyMCE'); //NON VIENE ESEGUITO!!!
        //Aggiungi contenuto dinamicamente
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Nuovo contenuto.');
        } 
    });
}

Scott B

5.7K

jquery tinymce jquery ui

Commenti

TinyMce non utilizza #content, che è nascosto per così dire in background, TinyMCE crea un frame dove il contenuto viene gestito, che viene poi inviato (o inserito) nell'originale textarea. @cheesypeanut ti ha coperto.

t31os

5 ago 2011 03:19:06

Perché il tuo jQuery non viene eseguito al document ready? Se lo esegui prima, TinyMCE non ha ancora fatto il suo lavoro..

t31os

9 ago 2011 03:01:13

Tutte le risposte alla domanda

Commenti

Quello era solo un errore di digitazione quando ho creato la domanda. L'ho modificato, ma non è quello il problema. L'evento drop non viene ancora attivato.

Scott B

5 ago 2011 00:52:54

Prova la soluzione che ho aggiunto sopra.

cheesypeanut

5 ago 2011 02:26:30

ha sicuramente senso, ma almeno nei miei siti di test (che usano WordPress 3.2.1), non riesco a far scattare l'alert del drop. +1 comunque. Ho ripostato il mio codice nel caso tu o qualcun altro riesca a vedere cosa mi sfugge.

Scott B

8 ago 2011 22:50:27

Prova a dichiarare sul tag body di TinyMCE in questo modo, funziona per me

Su 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>';

Sulla pagina dell'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);
    }

Sembra che usare jQuery con TinyMCE non funzioni...

Toccos

21

20 nov 2012 02:02:42

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

Nell'esempio precedente la seguente riga:

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

dovrebbe essere:

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

Questo dovrebbe abilitare il trascinamento e il rilascio degli elementi della lista.

Per consentire il rilascio degli elementi nell'area di testo TinyMCE, il seguente codice funziona.

$('#editorcontainer').droppable({ 
    drop: function(event, ui) { 
        alert('rilasciato'); //ORA SI ATTIVA!
        //Aggiungi contenuto dinamicamente
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Nuovo contenuto.');
    } 
});

cheesypeanut

286

5 ago 2011 00:34:23