Cum să activezi editorul de conținut ca țintă droppable cu jQuery-ui?

Question

Cum să activezi editorul de conținut ca țintă droppable cu jQuery-ui?

4 aug. 2011, 23:54:06

Vizualizări: 12.8K

Voturi: 1

Încerc să activez editorul de conținut WordPress ca element droppable folosind funcționalitatea de drag and drop din jQuery UI. Totuși, nu reușesc să fac drop-ul să funcționeze sau evenimentul de drop să se declanșeze.

Nu cumva omit ceva?

<ul id="keywords">
    <li>trage unu</li>
    <li>trage doi</li>
    <li>trage trei</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('element plasat în conținut'); //NU SE DECLANSEAZĂ!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE=='object')
{ 
    alert('tinyMCE este activ'); //NU SE DECLANSEAZĂ!!!
    jQuery('#editorcontainer').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert('element plasat în editorul tinyMCE'); //NU SE DECLANSEAZĂ!!!
        //Adaugă conținut dinamic
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Conținut nou.');
        } 
    });
}

Scott B

5.7K

jquery tinymce jquery ui

Comentarii

TinyMce nu folosește #content, acesta este ascuns în fundal, ca să zicem așa, TinyMCE creează un cadru în care conținutul este gestionat, care apoi este trimis (sau inserat) în textarea originală. @cheesypeanut ți-a rezolvat problema.

t31os

5 aug. 2011 03:19:06

De ce nu este jQuery-ul tău executat la încărcarea documentului? Dacă rulează înainte de asta, TinyMCE nu și-a făcut încă treaba..

t31os

9 aug. 2011 03:01:13

Toate răspunsurile la întrebare

Comentarii

Aceasta a fost doar o eroare de introducere a datelor când am creat întrebarea. Am modificat-o, dar nu asta este problema. Încă nu se declanșează niciun eveniment de tip drop.

Scott B

5 aug. 2011 00:52:54

Încearcă soluția pe care am adăugat-o mai sus.

cheesypeanut

5 aug. 2011 02:26:30

cu siguranță are sens, dar cel puțin pe site-urile mele de test (care rulează WordPress 3.2.1), nu reușesc să declanșez alerta drop. +1 oricum. Am repostat codul meu dacă tu sau altcineva vede ce am omis.

Scott B

8 aug. 2011 22:50:27

Încearcă să declari în tag-ul body al TinyMCE astfel, funcționează pentru mine

În 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>';

Pe pagina editorului:

    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);
    }

Se pare că folosirea jQuery cu TinyMCE nu funcționează...

Toccos

21

20 nov. 2012 02:02:42

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

În exemplul de mai sus, următoarea linie:

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

ar trebui să fie:

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

Aceasta ar trebui să permită elementele de listă să fie glisate și plasate.

Pentru a permite elementelor să fie plasate în zona de text TinyMCE, următorul cod funcționează.

$('#editorcontainer').droppable({ 
    drop: function(event, ui) { 
        alert('plasat!'); //ACUM SE ACTIVEAZĂ!
        //Adăugare dinamică de conținut
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Conținut nou.');
    } 
});

cheesypeanut

286

5 aug. 2011 00:34:23