Inicialice el editor / editor visual TinyMCE después de insertar AJAX

11

Tengo un grupo de campos de estilo "repetidor" en una página de opciones personalizadas. Hay un editor visual activo en un estado oculto, y cuando el usuario hace clic en "agregar nuevo", se clona toda la fila. Luego necesito inicializar el editor visual en la fila clonada. Mi 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 pantalla de la interfaz:

Captura de pantalla

Cuando se carga la página, aparece el error de consola:

TypeError no capturado: no se puede leer la propiedad 'onpageload' de undefined

Y, por supuesto, el editor no funciona. Después de guardar la página, funciona bien, por supuesto, pero también necesito que sea funcional cuando se agrega la fila.

ajax tinymce editor Jack Arturo
fuente
¿Obtuviste una solución al problema 'onpageload'
Kvvaradha
Parece que también puede necesitar registrar algunas cosas con etiquetas rápidas. No estoy 100% seguro, ya que no puedo probar esto localmente, pero podría comenzar con stackoverflow.com/questions/21519322/… para ver si eso ayuda en absoluto.
phatskat
Oye, me encontré con esto de nuevo. OP, ¿puede agregar un fragmento de cómo agregar uno de estos campos al editor de publicaciones? Puedo intentar y reprobar esto localmente y profundizar en ello si puedes proporcionar una manera de soportarlo yo mismo.
Phatskat
Hola @phatskat, gracias. De hecho, terminé yendo en una dirección completamente diferente ... el cliente quería empaquetar este sistema para la venta comercial, así que reescribimos todo usando una interfaz personalizada sin ACF. Agradezco la oferta de ayuda!
Jack Arturo

Respuestas:

1

¿Conseguiste hacer que el editor funcionara sin tu javascript incluido? Si es así, intente crear una plantilla que incluya un editor de tinymce que funcione y luego reescriba su javascript para copiar esa plantilla usando el WithDataAndEventsargumento de la clone()función jQuery establecida en verdadero.

Por ejemplo:

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