Inicialize o editor TinyMCE / editor visual após a inserção do AJAX


11

Eu tenho um grupo de campos no estilo "repetidor" em uma página de opções personalizadas. Há um editor visual ativo em um estado oculto e, quando o usuário clica em "adicionar novo", a linha inteira é clonada. Preciso inicializar o editor visual na linha clonada. Meu código:

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

Captura de tela da interface:

Captura de tela

Quando a página carrega, recebo o erro do console:

TypeError não capturado: não é possível ler a propriedade 'onpageload' de undefined

E é claro que o editor não funciona. Depois de salvar a página, ela funciona bem, é claro, mas preciso que ela funcione quando a linha é adicionada também.


você conseguiu solução para o problema 'onpageload'
— Kvvaradha

Parece que você também pode precisar registrar algumas coisas com tags rápidas. Não tenho 100% de certeza, pois não posso testar isso localmente, mas você pode começar com stackoverflow.com/questions/21519322/… para ver se isso ajuda.
— phatskat

Ei, me deparei com isso novamente. OP, você pode adicionar um trecho de como adicionar um desses campos ao editor de postagem? Posso tentar reproduzi-lo localmente e investigá-lo se você puder fornecer uma maneira de suportar isso sozinho.
— phatskat

Hey @phatskat, obrigado. Na verdade, acabei seguindo uma direção totalmente diferente ... o cliente queria empacotar esse sistema para venda comercial, então reescrevemos tudo usando uma interface personalizada sem o ACF. Aprecie a oferta para ajudar!
— 24518 Jack Arturo

Respostas:


1

Você conseguiu que o editor funcionasse sem o seu javascript incluído? Nesse caso, tente criar um modelo que inclua um editor de timbre funcional e reescreva seu javascript para copiar esse modelo usando o WithDataAndEventsargumento da clone()função jQuery definido como true.

Por exemplo:

$('.cloner').click(function(){
  $('.container').append($('.template').clone(true).removeClass('hidden'));
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.