Editor WP – wp_editor() no se muestra correctamente en la llamada ajax

Estoy creando un complemento de WordPress. Tiene una funcionalidad para mostrar el editor al agregar un producto a través de AJAX, pero el editor no se muestra correctamente.

El usuario puede agregar tantos productos como quiera, así que tenga en cuenta que habrá más de un wp_editor()

Consulte la captura de pantalla adjunta:

He usado el siguiente código:

PHP

public function add_product() {

        // Get product id
        $prod_id = filter_input(INPUT_POST, 'pid');

        // WordPress WYSIWYG Editor
        wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text'));
        wp_die();
}

JQUERY

$('.add-prod').live('click', function () {

        var prod_id = $('.prod-id').val();
        var data = {
            action: 'add_prod',
            pid: prod_id
        };
        $('#update-msg').show();

        $.post(ajaxurl, data, function (result) {
            $('#the-list').append(result);
            $('#update-msg').hide();
        });

        return false;
});

Utilicé una solución de Internet, pero parcialmente no funciona del todo. Usó el siguiente código:

PHP

wp_editor($product->prod_desc, $textarea_id, array('textarea_name' => 'text'));
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

JQUERY

var eid = '#item-list';
switchEditors.go(eid, 'tmce')
quicktags({id: eid});
//init tinymce
tinyMCEPreInit.mceInit[eid]['elements'] = eid;
tinyMCEPreInit.mceInit[eid]['body_class'] = eid;
tinyMCEPreInit.mceInit[eid]['succesful'] = false;
tinymce.init(tinyMCEPreInit.mceInit[eid]);

Y el código de arriba hace esto:

Obviamente, wp_editor no aparecerá ya que está haciendo una llamada ajax que solo devuelve la respuesta ajax pero no el editor wp que está construido por javascript en esa página. En resumen, la llamada ajax puede obtener una respuesta de texto del lado del servidor, pero no el editor de javascript, que está construido en el lado del cliente y necesita un procesador de javascript para procesar.

El siguiente puede ser un ejemplo suedo de lo que se puede hacer para que el editor funcione.

1. justo debajo del botón “agregar producto”, desde donde se realiza la llamada ajax, imprima un editor usando el código php y configure su visualización en ninguno para que el editor no aparezca en la página.

p.ej

<div class="wp-editor-wrapper" style="display: none;">
     <?php wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text')); ?>
</div>

2. La función php para la respuesta ajax solo debe devolver contenido de texto. No es un editor en sí mismo y debería verse así.

   función pública añadir_producto() {

       // Get product id
       $prod_id = filter_input(INPUT_POST, 'pid');
   
       // if $prod_id is used here, use it to get content
       echo "Test Content";
       wp_die();
   

   }

3. cuando se recibe una respuesta de contenido de texto, usando jQuery, cree un clon de div “wp-editor-wrapper” y agréguelo en lugar de textarea y configure su contenido desde la respuesta ajax.

Supongo que encontré una solución más elegante usando la función window.QTags. Si intenta llamar a tinyMCEPreInit desde la consola de depuración, debería poder acceder a la propiedad qtInit del objeto.

console.log(tinyMCEPreInit.qtInit);

Debería devolver algo como esto.

{
   editor_0: {id: "editor_1", buttons: "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"}
}

Entonces, después de que termine su llamada ajax, intente copiar esta propiedad, reemplace una identificación por una nueva y llame a la función QTags. Deberían aparecer todos los botones.

window.QTags({'id': `YOUR_NEW_ID_HERE`, 'buttons': "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"});