web-dev-qa-db-fra.com

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

J'ai un groupe de champs de style "répéteur" sur une page d'options personnalisées. Un éditeur visuel actif est dans un état masqué et lorsque l'utilisateur clique sur "ajouter un nouveau", toute la ligne 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:

 Screenshot 

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

Uncaught TypeError: Impossible de lire la propriété 'onpageload' de undefined

Et bien sûr, l'éditeur ne fonctionne pas. Après avoir sauvegardé la page, cela fonctionne bien sûr, mais j’ai besoin d’être fonctionnel lorsque la ligne est également ajoutée.

ajaxtinymceeditor
11
Jack Arturo

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

Par exemple:

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