jQuery中的TinyMCE實例可排序

Question

我很難過，很沮喪，所以有時間尋求幫助。做了很多谷歌搜索，但還沒有找到適合我的解決方案。

我所擁有的是一大堆可以使用jquery排序的div，一些div包含一個TinyMCE實例。在你嘗試移動一個包含TinyMCE實例的div時，這一切都很好 - 當你做TinyMCE似乎刷新自己並創建一個新的實例，然後你就會丟失數據等等。然後整個頁面都打破了，因爲javascript不再作品:)。在此期間，我在Firebug中獲得了JavaScript構造函數錯誤等。

我決定去是最好的方式，當DIV開始被從文本區拖刪除TinyMCE的，當它被放置在它的新位置插入TinyMCE的回。

我可以罰款刪除但無法將其添加回來 - 因爲我得到更多的構造函數錯誤。

注意：TinyMCE會自動添加到我使用的系統中的所有文本區域，所以儘量避免與TinyMCE混淆。

在下面的代碼中，我只是針對特定的textarea id進行測試。

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

其他人有其他解決方案？如果您需要更多信息，請讓我:)

Answer 1

不，沒有其他解決方案。這是它需要完成的方式。當您使用mceRemoveControl和mceAddControl完成dom操作時，需要禁用它們並重新激活它們時，如果要操作包含tinymce實例的dom元素，請使用mceRemoveControl和mceAddControl。

Answer 2

對於任何嘗試動態分配「textarea1」的人來說，可拖動元素都是作爲ui.item在UI對象中。對於每個可排序的一個文本區域：

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

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

Answer 3

嘿，如果你已經在你的MCE實例中的數據，以避免失去它，你可以試試這個：

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

在我來說，我級的所有MCE實例與.tinyMCE

Answer 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

版本4我有多個段落動態形式這些都可以用TinyMCE進行編輯。爲了允許對段落進行重新排序，我添加了將文本區域上下移動的按鈕。

我設法讓它在按鈕上使用alt =「textareaid」來上下移動textarea，並使用這個textareaid作爲mceRemoveEditor和mceAddEditor命令。 textarea必須放在class =「textarea_container」的div中。

$('.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

對於我工作的解決方案就在這裏。 對於TinyMCE的

我的情況第4版：我用用中繼場排序的jQuery的meta框 裏面的WordPress。每個可排序元素都將textarea轉換爲tinyMCE編輯器。

當我從可排序項目中移動一個元素時，只有該一個元素的編輯器被破壞，並且沒有內容顯示在視覺 選項卡中。我用mceRemoveEditor和mceAddEditor，以防止問題。

所以我在結合上面的一些解決方案之後來到了最終的解決方案。感謝@Honorable Chow，@pragmar @Sonicdesign那麼你的解決方案並不適合我，因此我修改了它們。這是我的代碼，對我來說工作得很好。

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具有能夠解決類似的問題：

tinymce.activeEditor.setMode（ '只讀'）;

和

tinymce.activeEditor.setMode（ '設計'）;

這個工程的版本4.3.x版

Answer 8

我做

$("#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

嗯，這個問題的一個穩定的解決方案，爲TinyMCE的第4節+是：

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

如果你的textarea有不止一種類型的設置，你必須在每次重置之前聲明tinymce.init(settings)，否則最後一個應用於全部。

一個簡單的方法來變動內容設置是設置一個標誌的設置，在您的textarea的類型，如：

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

，然後使用加載功能將distrubute必要的一個：

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

這很好，只是我用於一個編輯器。非常感謝你 ：） 。

Answer 11

我最終只是摧毀和重建上排序停止編輯（）事件：

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

就像一個魅力和可能比其他建議一個更好的選擇，以摧毀啓動編輯器（）事件和然後在stop（）上重新創建 - 因爲這樣你仍然在拖動視覺上有吸引力的編輯器。附：使用TinyMCE 4.5.2