I have a bunch of wysiwyg editors in a metabox that are sortable. Unfortunately whenever I drag a row around I get this error, and I have no idea what is causing it.

Uncaught TypeError: Object [object Object] has no method 'destroy'

This is my sortable code:

$( "#repeatable-fieldset-one tbody" ).sortable({
            handle: '.jQuerySortableIcon',
            cursor: 'move',
            placeholder: "topTenSortablePlaceholder",
            start: function() {
                $('textarea').each(function() {
                    var id = $(this).attr('id');    
                    tinyMCE.execCommand('mceRemoveControl', false, id);
                // remove control from our descripiton, and title fields to preserve content
                // tinymce.EditorManager.execCommand('mceRemoveControl',true, 'movie_description-1');       
            update: function() {                
                // update the ranking numbers after sorted
                $('.single-movie-row').each(function() {
                    var thisIndex = ($(this).index() + 1);
                    $(this).find('.movie_rank_number').val('# '+thisIndex);

                $(this).parents("#repeatable-fieldset-one tbody").sortable('refresh');  

As you can see, on start I am removing control from my textareas (which visually works). The WYSIWYG editors are still below the textareas, after removing control for whatever reason.

If I take out this line: tinyMCE.execCommand('mceRemoveControl', false, id); I no longer get the error, but my wysiwyg editors don't convert back to textareas. I am converting them to textareas to preserve the content within them.

First , what is this error? Is it because its unable to remove the wysiwyg editor when I run mceRemoveControl? Thought I had this working earlier, went with a different method that didn't work out, and have since came back to this route and am now hitting this error.

Any ideas?

EDIT It now looks like the reason its throwing the error is because its unable to remove the placeholder. But I don't know why.

It also looks like after I drop my new item into place, all of these styles get added to it throwing everything off:

width: 1375px; height: 263px; position: absolute; z-index: 1000;


I pointed you to my work in chat, but for any other user, I have solved repeatable, sortable tinyMCE editors (as best as I could) and have the code available on github.

Specifically, the JS script which includes a section on how to disable tinyMCE on the start of a sortable move and re-enable it when sorting it finished.

var textareaID;
    handle: 'h3.handle',
    axis: 'y',
    opacity: 0.5,
    tolerance: 'pointer',
    start: function(event, ui) { // turn TinyMCE off while sorting (if not, it won't work when resorted)
        textareaID = $(ui.item).find('.customEditor textarea').attr('id');
        try { tinyMCE.execCommand('mceRemoveControl', false, textareaID); } catch(e){}
    stop: function(event, ui) { // re-initialize TinyMCE when sort is completed
        try { tinyMCE.execCommand('mceAddControl', false, textareaID); } catch(e){}

Where $('.wpa_loop') is the selector pertinent to my code.

  • 2
    For those who find the above answer not working, as of tinyMCE 4.x you need to use 'mceRemoveEditor'/'mceAddEditor' commands instead of 'mceRemoveControl'/'mceAddControl' – Parham Dec 29 '15 at 21:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.