11

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:

Screenshot

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.

  • did you get solution to the problem 'onpageload' – Kvvaradha Apr 17 '17 at 14:36
  • It looks like you may also need to register some things with quick tags. I'm not 100% sure as I can't test this locally, but you could start with stackoverflow.com/questions/21519322/… to see if that helps at all. – phatskat Jan 26 '18 at 15:43
  • Hey, came across this again. OP, can you please add a snippet for how to add one of these fields to the post editor? I can try and repro this locally and dig into it if you can provide a way to stand this up myself. – phatskat Feb 23 '18 at 16:01
  • Hey @phatskat, thanks. I actually ended up going a different direction entirely... the client wanted to package this system for commercial sale so we re-wrote everything using a custom interface without ACF. Appreciate the offer to help! – Jack Arturo Feb 24 '18 at 16:13
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'));
});

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.