Initialiser l'éditeur TinyMCE / l'éditeur visuel après l'insertion AJAX

J'ai un groupe de champs de style "répéteur" sur une page d'options personnalisées. Il y a un éditeur visuel actif dans un état caché, et lorsque l'utilisateur clique sur "ajouter un nouveau", la ligne entière est clonée. J'ai ensuite besoin d'initialiser l'éditeur visuel dans la ligne clonée. Mon 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});
    });
});

Capture d'écran de l'interface:

Lorsque la page se charge, j'obtiens l'erreur de console:

TypeError non capturé: impossible de lire la propriété «onpageload» de non défini

Et bien sûr, l'éditeur ne fonctionne pas. Après avoir enregistré la page, cela fonctionne bien sûr, mais j'ai besoin qu'elle soit fonctionnelle lorsque la ligne est également ajoutée.

ajax tinymce editor

— Jack Arturo
source

avez-vous trouvé une solution au problème «onpageload»

— Kvvaradha

Il semble que vous ayez également besoin d'enregistrer certaines choses avec des balises rapides. Je ne suis pas sûr à 100% car je ne peux pas tester cela localement, mais vous pouvez commencer avec stackoverflow.com/questions/21519322/… pour voir si cela aide du tout.

— phatskat

Hé, je suis tombé à nouveau sur cela. OP, pouvez-vous s'il vous plaît ajouter un extrait pour savoir comment ajouter l'un de ces champs à l'éditeur de publication? Je peux essayer de reprocher cela localement et creuser si vous pouvez fournir un moyen de le faire moi-même.

— phatskat

Hé @phatskat, merci. En fait, j'ai fini par prendre une direction complètement différente ... le client voulait emballer ce système pour la vente commerciale, nous avons donc tout réécrit en utilisant une interface personnalisée sans ACF. Appréciez l'offre d'aide!

— Jack Arturo

Avez-vous réussi à faire fonctionner l'éditeur sans votre javascript inclus? Si c'est le cas, essayez de créer un modèle qui comprend un éditeur de tinymce fonctionnel, puis réécrivez votre javascript pour copier ce modèle en utilisant l' WithDataAndEventsargument de la clone()fonction jQuery défini sur true.

Par exemple:

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

— Fleuv
source