Как сделать редактор контента целью для перетаскивания с помощью jQuery-ui?

Question

Как сделать редактор контента целью для перетаскивания с помощью jQuery-ui?

4 авг. 2011 г., 23:54:06

Просмотры: 12.8K

Голосов: 1

Я пытаюсь сделать редактор контента WordPress целью для перетаскивания с использованием jQuery UI drag and drop. Однако у меня не получается заставить работать событие drop или перетаскивание.

Что я упускаю?

<ul id="keywords">
    <li>перетащи один</li>
    <li>перетащи два</li>
    <li>перетащи три</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('элемент сброшен в контент'); //НЕ СРАБАТЫВАЕТ!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE=='object')
{ 
    alert('tinyMCE активен'); //НЕ СРАБАТЫВАЕТ!!!
    jQuery('#editorcontainer').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert('элемент сброшен в tinyMCE редактор'); //НЕ СРАБАТЫВАЕТ!!!
        //Динамически добавляем контент
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Новый контент.');
        } 
    });
}

Scott B

5.7K

jquery tinymce jquery ui

Комментарии

TinyMce не использует #content, он, так сказать, скрыт в фоновом режиме. TinyMCE создает фрейм, в котором управляется содержимое, которое затем отправляется (или вставляется) в оригинальное текстовое поле. @cheesypeanut вам помог.

t31os

5 авг. 2011 г. 03:19:06

Почему ваш jQuery не запускается при готовности документа? Если вы запускаете его до этого, TinyMCE еще не выполнил свою работу..

t31os

9 авг. 2011 г. 03:01:13

Все ответы на вопрос

Комментарии

Это была просто ошибка ввода, когда я создавал вопрос. Я исправил её, но это не решает проблему. Событие drop по-прежнему не срабатывает.

Scott B

5 авг. 2011 г. 00:52:54

Попробуйте решение, которое я добавил выше.

cheesypeanut

5 авг. 2011 г. 02:26:30

это определенно имеет смысл, но по крайней мере на моих тестовых сайтах (с wordpress 3.2.1) мне не удается заставить сработать alert при drop. В любом случае +1. Я переопубликовал свой код, если вы или кто-то еще увидит, что я упустил.

Scott B

8 авг. 2011 г. 22:50:27

Попробуйте объявить в теге body TinyMCE следующим образом, у меня это работает

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

На странице редактора:

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

Кажется, использование jQuery с TinyMCE не работает...

Toccos

21

20 нояб. 2012 г. 02:02:42

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

В приведенном выше примере следующая строка:

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

должна быть заменена на:

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

Это позволит перетаскивать элементы списка.

Для того, чтобы элементы можно было бросать в текстовую область TinyMCE, подойдет следующий код.

$('#editorcontainer').droppable({ 
    drop: function(event, ui) { 
        alert('элемент сброшен'); //ТЕПЕРЬ СРАБАТЫВАЕТ!
        //Динамически добавляем контент
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Новый контент.');
    } 
});

cheesypeanut

286

5 авг. 2011 г. 00:34:23