Initialize TinyMCE editor / visual editor after AJAX insert

Question

I have a "repeater" style field group on a custom options page. There's an active visual editor in a hidden state, and when the user clicks "add new" the whole row is cloned. I then need to initialize the visual editor in the cloned row. My code:

$('.repeater-add-new').click(function(event) {
    event.preventDefault();
    var target = $(this).data('repeater');
    $( '#' + target).find('.repeater-row:not(.clone) .repeater-content.in').collapse();
    var newRow = $( '#' + target + ' .repeater-row.clone' ).clone().appendTo( '#' + target + ' .repeater-row-wrapper' ).removeClass('clone');
    rebuildIndex(target);

    // Initialize editors if needed
    newRow.find('.wp-editor-wrap').each(function(index, el) {
        var ed_id = $(this).find('textarea').attr('id');

        tinymce.init(tinyMCEPreInit.mceInit[ed_id]);
        tinymce.execCommand('mceAddEditor', false, ed_id); 
        quicktags({id : ed_id});
    });
});

Screenshot of the interface:

When the page loads, I get the console error:

Uncaught TypeError: Cannot read property 'onpageload' of undefined

And of course the editor doesn't work. After I save the page it works fine of course, but I need it to be functional when the row is added as well.

Answer 1

Did you manage to get the editor working without your javascript included? If so try to create a template what includes a working tinymce editor and then rewrite your javascript to copy that template using the WithDataAndEvents argument of the jQuery clone() function set to true.

For example:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});