Inizializza l'editor TinyMCE / editor visivo dopo l'inserimento di AJAX


11

Ho un gruppo di campi in stile "ripetitore" in una pagina di opzioni personalizzate. C'è un editor visivo attivo in uno stato nascosto e quando l'utente fa clic su "aggiungi nuovo" viene clonata l'intera riga. Devo quindi inizializzare l'editor visivo nella riga clonata. Il mio codice:

$('.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});
    });
});

Schermata dell'interfaccia:

Immagine dello schermo

Quando la pagina viene caricata, viene visualizzato l'errore della console:

Uncaught TypeError: impossibile leggere la proprietà 'onpageload' di undefined

E ovviamente l'editor non funziona. Dopo aver salvato la pagina, ovviamente, funziona benissimo, ma ho bisogno che funzioni anche quando viene aggiunta la riga.


hai trovato una soluzione al problema "onpageload"
Kvvaradha,

Sembra che potresti anche dover registrare alcune cose con tag rapidi. Non sono sicuro al 100% in quanto non posso testarlo localmente, ma potresti iniziare con stackoverflow.com/questions/21519322/… per vedere se questo aiuta a tutti.
Phatskat,

Ehi, l'ho trovato di nuovo. OP, puoi aggiungere uno snippet su come aggiungere uno di questi campi all'editor dei post? Posso provare a riproporlo localmente e scavare in esso se riesci a fornire un modo per resistere da solo.
phatskat,

Ehi @phatskat, grazie. In realtà ho finito per andare completamente in un'altra direzione ... il cliente voleva impacchettare questo sistema per la vendita commerciale, quindi abbiamo riscritto tutto usando un'interfaccia personalizzata senza ACF. Apprezzo l'offerta per aiutare!
Jack Arturo,

Risposte:


1

Sei riuscito a far funzionare l'editor senza il tuo javascript incluso? In tal caso, prova a creare un modello che includa un editor di tinymce funzionante e quindi riscrivi il tuo javascript per copiarlo utilizzando l' WithDataAndEventsargomento della clone()funzione jQuery impostata su true.

Per esempio:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.