Initialisieren Sie den TinyMCE-Editor / visuellen Editor nach dem Einfügen von AJAX

11

Ich habe eine Feldgruppe im Repeater-Stil auf einer Seite mit benutzerdefinierten Optionen. Es gibt einen aktiven visuellen Editor in einem versteckten Zustand, und wenn der Benutzer auf "Neu hinzufügen" klickt, wird die gesamte Zeile geklont. Ich muss dann den visuellen Editor in der geklonten Zeile initialisieren. Mein 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 der Benutzeroberfläche:

Bildschirmfoto

Wenn die Seite geladen wird, wird der Konsolenfehler angezeigt:

Nicht erfasster TypeError: Die Eigenschaft 'onpageload' von undefined kann nicht gelesen werden

Und natürlich funktioniert der Editor nicht. Nachdem ich die Seite gespeichert habe, funktioniert sie natürlich einwandfrei, aber sie muss funktionsfähig sein, wenn die Zeile ebenfalls hinzugefügt wird.

ajax tinymce editor Jack Arturo
quelle
Haben Sie eine Lösung für das Problem 'onpageload' bekommen
Kvvaradha
Es sieht so aus, als müssten Sie möglicherweise auch einige Dinge mit Quick Tags registrieren. Ich bin mir nicht 100% sicher, da ich dies nicht lokal testen kann, aber Sie könnten mit stackoverflow.com/questions/21519322/… beginnen, um zu sehen, ob das überhaupt hilft.
Phatskat
Hey, bin wieder darauf gestoßen. OP, können Sie bitte einen Ausschnitt hinzufügen, wie Sie eines dieser Felder zum Post-Editor hinzufügen können? Ich kann versuchen, dies lokal zu wiederholen und mich damit zu befassen, wenn Sie eine Möglichkeit bieten können, dies selbst zu behaupten.
Phatskat
Hey @phatskat, danke. Eigentlich bin ich eine ganz andere Richtung gegangen ... der Kunde wollte dieses System für den kommerziellen Verkauf verpacken, also haben wir alles über eine benutzerdefinierte Schnittstelle ohne ACF neu geschrieben. Schätzen Sie das Angebot zu helfen!
Jack Arturo

Antworten:

1

Haben Sie es geschafft, den Editor ohne Ihr Javascript zum Laufen zu bringen? Wenn ja, versuchen Sie, eine Vorlage zu erstellen, die einen funktionierenden Tinymce-Editor enthält, und schreiben Sie dann Ihr Javascript neu, um diese Vorlage mit dem WithDataAndEventsArgument der clone()auf true gesetzten jQuery- Funktion zu kopieren .

Beispielsweise:

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