TinyMCE 4不能與可排序的jquery divs一起工作

Question

我正試圖通過拖放divs並編輯它們來實時製作新聞通訊。 要使用jquery.sortable（）對div進行排序，這些div還包含TinyMce。哪些工作正常，直到divs拖。我已經通過this link
但我仍然無法實現這一點。

標記：

<div class="container"> 
    <div class="sort-List"> 
     <li> 
      <div class="edit-Text"> 
       <p>Div 1</p> 
      </div> 
     </li> 
     <li> 
      <div class="edit-Text"> 
       <p>Div 2</p> 
      </div> 
     </li> 
     <li> 
      <div class="edit-Text"> 
       <p>Div 3</p> 
      </div> 
     </li> 
     <li> 
      <div class="edit-Text"> 
       <p>Div 4</p> 
      </div> 
     </li> 
    </div> 
</div> 

JS：

<!--Tiny Mce--> 
<script> 
    tinymce.init({ 
     selector: '.edit-Text', 
     inline: true, 
     menubar: false, 
     plugins: "textcolor colorpicker", 
     toolbar: ["undo redo | styleselect | bold italic | alignleft aligncenter alignright | forecolor backcolor"], 
    }); 
</script> 
<!--Tiny Mce-->  
<!--MAKE DIVS SORTABLE--> 
<script> 
    $(function() { 
     $(".sort-List").sortable({ 
      cursor: 'move', 
      start: function (e, ui) { 
       $(this).find('.edit-Text').each(function() { 
        tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); 
       }); 
      }, 
      stop: function (e, ui) { 
       $(this).find('.edit-Text').each(function() { 
        tinyMCE.execCommand('mceAddEditor', true, $(this).attr('id')); 
       }); 
      }, 
     }); 
    }); 
</script> 
<!--MAKE DIVS SORTABLE--> 

Answer 1

TinyMCE的不喜歡它有一個編輯DOM中四處移動。 之後編輯器將不再工作。

這裏繼續的方法是關閉一個tinymce實例，然後它的根元素（即textarea或div）被移動到dom中的另一個位置。 錯位後，您可以照常重新編輯編輯器。

// Save the tinymce content to Textarea 
tinyMCE.triggerSave(); 

//Disabling the text area 
var textareaId = [PUT YOUR TEXTAREA ID HERE]; 
tinyMCE.execCommand("mceRemoveEditor", false, textareaId); 

// Moving code - Your code may be different 
$(this).insertAfter($(this).next()); 

//reinitiate tinyMCE - custom initTinyMCE function, you can do your way 
initTinyMCE();