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

11

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:

Capture d'écran

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
la 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

Réponses:

1

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
la source