Sortable WYSIWYG editor

2 Views

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’

Read More

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');    
                    $('#'+id).next().remove();
                    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;

Post Views: 2

Related posts

1 comment

  1. 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;
$('.wpa_loop').sortable({
    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){}
        $(this).find('.update-warning').show();
    }
});

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

Comments are closed.