TinyMCE disappears after save Widget in Wordpress

Question

first of all, sorry for my bad english, I'm from Germany.

I just created my first widget. It's a widget that creates automatically a grid out of a list.

I can add a new list-item and every form field will be duplicated. But after 3 days of searching the internet without a result I decided to ask by myself... So here is my first problem, when I add a new item, the TinyMCE in the new item is disabled, I can't click on the buttons or type text into it. There are no errors in the console log.

My second problem is when I save the widget, all TinyMCE-Editors disappear and leave the textareas, with the html code.

Here also: no errors... but I've seen, that the TinyMCE isn't loading after save. There is no iframe, nothing but the textarea.

After reload the widget page, everything is fine again for both problems. So I have to add new items and save the page and then reload it to edit and edit the content, but that don't solve the problem.

I think I have to reinitialize the TinyMCE but I don't know how.

I had problems with adding the wordpress editor to my widget so I integrated the jQuery TinyMCE from the website.

Here is the code snippet of my add-function:

$("body").on('click.sgw','.sgw-add',function() { 
    var sgw = $(this).parent().parent();
    var num = sgw.find('.simple-grid .list-item').length + 1;

    sgw.find('.amount').val(num);

    var item = sgw.find('.simple-grid .list-item:last-child').clone();
    var item_id = item.attr('id');
    item.attr('id',increment_last_num(item_id));

    $('.toggled-off',item).removeClass('toggled-off');
    $('.number',item).html(num);
    $('.item-title',item).html('');
    $('.custom_media_image',item).attr('src','');
    $('textarea',item).val('');
    $('img.custom_media_image',item).each(function() {
        var class_val = $(this).attr('class');
        $(this).attr('class',increment_last_num(class_val));
    });

    $('textarea',item).each(function() {
        var id_iframe = $(this).attr('id');
        tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
        tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
    });


    $('label',item).each(function() {
        var for_val = $(this).attr('for');
        $(this).attr('for',increment_last_num(for_val));
    });
    $('input',item).each(function() {
        var id_val = $(this).attr('id');
        var name_val = $(this).attr('name');

        $(this).attr('id',increment_last_num(id_val));
        $(this).attr('name',increment_last_num(name_val));

        if($(':checked',this)){
           $(this).removeAttr('checked');
        }
        if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url')){
           var class_val = $(this).attr('class');
           $(this).attr('class',increment_last_num(class_val));
        }
        if($(this).hasClass('button-primary')){
           var number_val = $(this).attr('number');
           $(this).attr('number',increment_last_num(number_val));
        }
        $(this).not('#custom_media_button').val('');
    });

    sgw.find('.simple-grid').append(item);
    sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
});

I hope this is understandable and someone can help me. You can download the zip here: https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0

mediaguru mediaguru · Accepted Answer · 2017-02-25T17:19:14

Are you trying to run several editors at once? There's a limitation with Wordpress and TinyMCE where you can basically one editor at a time. I've gotten around that but it was very difficult.

To load a new editor you may have to remove the old one:

 tinymce.remove();

TinyMCE disappears after save Widget in Wordpress

1 Answers