web-dev-qa-db-fra.com

Comment activer l'éditeur de contenu en tant que cible définissable avec jQuery-ui?

J'essaie d'activer l'éditeur de contenu WordPress comme une liste de dépôt en utilisant le glisser-déposer de l'interface utilisateur jQuery. Cependant, je ne parviens pas à faire glisser le glisser-déposer ni à déclencher l'événement drop.

Y a-t-il quelque chose qui me manque?

<ul id="keywords">
    <li>drag one</li>
    <li>drag two</li>
    <li>drag three</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('dropped in content'); //DOES NOT FIRE!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE=='object')
{ 
    alert('tinyMCE is active'); //DOES NOT FIRE!!!
    jQuery('#editorcontainer').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert('dropped in tinyMCE editor'); //DOES NOT FIRE!!!
        //Dynamically add content
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'New content.');
        } 
    });
}
jquerytinymcejquery-ui
1
Scott B

Dans l'exemple ci-dessus, la ligne suivante:

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

devrait être:

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

Cela devrait permettre aux éléments de la liste d'être glissés et déposés.

Pour permettre aux éléments d'être déposés sur la zone de texte TinyMCE, le code suivant fonctionne.

$('#editorcontainer').droppable({ 
    drop: function(event, ui) { 
        alert('dropped'); //NOW FIRES!
        //Dynamically add content
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'New content.');
    } 
});
2
cheesypeanut

Essayez de déclarer sur l'étiquette du corps de TinyMCE comme ceci, cela fonctionne pour moi

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

Sur la page de l'éditeur:

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

Il semble que l'utilisation de jQuery avec TinyMCE ne fonctionne pas ...

2
Toccos