Instancje TinyMCE w jquery sortable

Question

Jestem zakłopotany i sfrustrowany, więc czas poprosić o pomoc. Zrobiłem dużo wyszukiwania, ale jeszcze znaleźć rozwiązanie, które działa dla mnie.

To, co mam, to cała paczka elementów div, które można posortować przy użyciu sortowania Jquery, niektóre elementy div zawierają instancję TinyMCE. Wszystko jest w porządku, dopóki nie spróbujesz przenieść elementu div zawierającego instancję TinyMCE - kiedy zrobisz TinyMCE, wydaje się, że odświeżasz się i tworzysz nową instancję, w wyniku której tracisz dane itd. A potem cała strona znika, gdy javascript nie jest już dłużej Prace :). W tym czasie dostaję błędy konstruktora JavaScript itp. W Firebug.

Co zdecydowałem najlepszą drogę do przebycia jest, gdy div zaczyna się przeciągać usuń TinyMCE z obszaru tekstu, a gdy jest on umieszczony w niej nowego wkładka pozycja TinyMCE widok.

mogę go usunąć w porządku ale problem z ponownym dodaniem go - gdy dostaję więcej błędów konstruktora.

Uwaga: TinyMCE automatycznie dodaje się do wszystkich obszarów tekstowych w systemie, którego używam, starając się uniknąć problemów z TinyMCE.

W poniższym kodzie po prostu celuję w konkretny identyfikator pola tekstowego do celów testowych.

$cols.sortable({ 
          cursor: 'move', 
          revert: true, 
          opacity: 0.6, 
          placeholder: 'widgetplaceholder', 
          forcePlaceholderSize: true, 
          connectWith: cols, 
          zIndex:9000, 
          cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content", 
          start: function(e, ui) { 
            // removes tinymce ok from textarea 
            tinyMCE.execCommand('mceRemoveControl', false, 'textarea1'); 

          }, 
          stop: function(e,ui) { 
            // breaks here - constructor error 
            tinyMCE.execCommand('mceAddControl', true, 'textarea1'); 
            $(this).sortable("refresh"); 
          } 
        }); 

Ktoś jeszcze ma jakieś inne rozwiązania? Jeśli potrzebujesz więcej informacji, proszę pozwolić mi :)

Answer 1

Nie, nie ma innego rozwiązania. W ten sposób należy to zrobić. Podczas manipulowania elementami domowymi zawierającymi instancje tinymce, należy je dezaktywować i ponownie je aktywować po zakończeniu operacji domingu za pomocą i mceAddControl.

Answer 2

Dla każdego, kto próbuje dynamicznie przypisać "textarea1", przeciągany jest w obiekcie Ui jako ui.item. Dla jednego pola tekstowego za Sortable:

tinyMCE.execCommand('mceAddControl', false, $('textarea',ui.item)[0].id); 

tinyMCE.execCommand('mceRemoveControl', false, $('textarea',ui.item)[0].id); 

Answer 3

Hej, jeśli masz już dane wystąpień MCE, aby uniknąć utraty, możesz spróbować tego:

start: function(e, ui){ 
    $(this).find('.tinyMCE').each(function(){ 
     tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id')); 
    }); 
}, 
stop: function(e,ui) { 
    $(this).find('.tinyMCE').each(function(){ 
     tinyMCE.execCommand('mceAddControl', true, $(this).attr('id')); 
     $(this).sortable("refresh"); 
    }); 
} 

W moim przypadku zaklasyfikowane wszystkie instancje MCE z .tinyMCE

Answer 4

dla wersji 4 TinyMCE

start: function (e, ui) { 
    $(ui.item).find('textarea').each(function() { 
    tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id')); 
    }); 
}, 
stop: function (e, ui) { 
    $(ui.item).find('textarea').each(function() { 
    tinymce.execCommand('mceAddEditor', true, $(this).attr('id')); 
    }); 
} 

Answer 5

mam dynamiczną formę z wielu punktach wszystko można edytować za pomocą TinyMCE. Aby umożliwić ponowne sortowanie akapitów, dodałem przyciski, które przesuwają obszary tekstowe w górę iw dół.

Udało mi się zmusić go do działania, używając alt = "textareaid" na przycisku, który przenosi tekst w górę lub w dół, i używając tego textareaid dla poleceń mceRemoveEditor i mceAddEditor. Textarea musi być w div z class = "textarea_container".

$('.move_textarea_up').click(function(){ 
    var tinymceid= $(this).attr("alt"); 
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid); 
    $(this).closest('div.textarea_container').insertBefore($(this).closest('div.textarea_container').prev()); 
    tinyMCE.execCommand('mceAddEditor', false, tinymceid); 
}); 
$('.move_textarea_down').click(function(){ 
    var tinymceid= $(this).attr("alt"); 
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid); 
    $(this).closest('div.textarea_container').insertAfter($(this).closest('div.textarea_container').next()); 
    tinyMCE.execCommand('mceAddEditor', false, tinymceid); 
}); 

Answer 6

Dla mnie działa rozwiązanie jest tutaj. Dla wersji 4 TinyMCE

moim przypadku: Używam sortable jQuery z pola repeater meta box wewnątrz WordPress. Każdy sortowalny element ma textarea przekonwertowany na edytor tinyMCE.

Kiedy poruszał jeden element z sortable przedmiotów, edytor tylko wewnątrz tego jednego elementu dostać zepsuty, a nie wyświetlany w zakładce wizualnej treści. użyłem mceRemoveEditor i mceAddEditor aby zapobiec problem.

Tak więc doszedłem do tego ostatecznego rozwiązania po połączeniu niektórych z powyższych rozwiązań. Dzięki @Honorable Chow, @pragmar @Sonicdesign Cóż, twoje rozwiązania nie sprawdziły się tak jak są, więc je zmodyfikowałem. Oto mój kod, który działa dobrze dla mnie.

start: function(e, ui){ 
     tinyMCE.execCommand('mceRemoveEditor', false, jQuery('textarea',ui.item)[0].id); 
    }, 
    stop: function(e,ui) { 
     tinyMCE.execCommand('mceAddEditor', false, jQuery('textarea',ui.item)[0].id); 
    } 

Answer 7

I wykazuje w stanie rozwiązać problem podobny:

tinymce.activeEditor.setMode ('tylko do odczytu');

i

tinymce.activeEditor.setMode ('wzór');

to działa dla wersji 4.3.x

Answer 8

Zrobiłem

$("#stores-container").sortable({ 

     stop: function(event, ui) { 

      textareaID = $(ui.item).find(' textarea').attr('id'); 

      textareaVal=$(ui.item).find(' textarea').val(); 

      editorID=$(ui.item).find('.mce-container').attr('id'); 

      $("#"+editorID).remove(); 

      $('#'+textareaID).show(); 
      tinymce.init({selector: '#'+textareaID}); 
     } 

    }); 

Answer 9

dobrze, stabilne rozwiązania tego problemu, dla TinyMCE v.4 + to:

start: function(e, ui){ 
     tinyMCE.triggerSave(); 
    }, 
    stop: function(e,ui) { 

     $(this).find('textarea').each(function(){ 
      tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); 

      // if your tinymce instance have different settings 
      tinymce.init(tinymce_settings($(this).attr('data-type'))); 

      tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); 
     }); 
    } 

Jeśli W twoim polu tekstowym zastosowano więcej niż jeden typ ustawień, musisz zadeklarować tinymce.init(settings) przed każdym resetem, w przeciwnym razie ostatni zastosowany będzie obowiązywał dla wszystkich.

Łatwym sposobem variate ustawienia, to ustawić flagę od ustawienia typu na textarea, takie jak:

<textarea data-type="settings_one"></textarea> <textarea data-type="settings_two"></textarea>

a następnie użyć funkcji ładowarka, która będzie distrubute niezbędne One:

function tinymce_settings(type) { 

var settings; 

switch(type) { 

    case 'settings_one' : 
    settings = {...} 
    break; 
    }  
return settings; 
} 

Answer 10

start: function (e, ui) { 
    tinyMCE.execCommand('mceRemoveEditor', false, editor_id); 
}, 
stop: function (e, ui) { 
    tinymce.execCommand('mceAddEditor', true, editor_id); 
} 

Działa to doskonale, po prostu użyłem dla jednego edytora. Dziękuję Ci bardzo :) .

Answer 11

skończyło się tylko niszcząc i odtwarzając zmienił na sortable stop() wydarzenie:

stop: function (e, ui) { 
    $(this).find('textarea').each(function() { 
    tinyMCE.get($(this).attr('id')).destroy(); 
    // the code below locates and evals the editor init script 
    eval($(this).parents('.item').find('script').html()); 
    }); 
} 

działa jak czar i jest chyba lepszym rozwiązaniem niż inne sugestie zniszczyć edytor na start() zdarzenie i następnie ponownie utworzyć na stop() - ponieważ w ten sposób wciąż przeciągasz atrakcyjny wizualnie edytor. P.S. Korzystanie z TinyMCE 4.5.2