Editor WP - wp_editor() non viene visualizzato correttamente sulla chiamata ajax

Question

Sto creando un plug-in WordPress. Ha una funzionalità per mostrare l'editor quando si aggiunge un prodotto tramite AJAX ma l'editor non viene visualizzato correttamente.

L'utente può aggiungere come molti prodotti come lui vuole così tenere a mente che ci sarà più di un wp_editor()

prega di fare riferimento alla schermata allegata:

ho usato il seguente codice:

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; 
}); 

ho usato una soluzione da internet, ma la sua parte non funziona completamente. Utilizzato il seguente codice:

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]); 

E il codice di cui sopra fa questo:

Answer 1

Ovviamente wp_editor non apparirà mentre stai facendo una chiamata ajax che restituisce solo una risposta ajax ma non un editor wp che è costruito da javascript su quella pagina. In breve, la chiamata ajax può ottenere una risposta del testo lato server, ma non un editor javascript che è costruito sul lato client e necessita di un processore javascript da elaborare.

Di seguito può essere un esempio suedo di ciò che può essere fatto per far funzionare l'editor.

1. appena sotto il pulsante "aggiungi prodotto", da dove viene effettuata la chiamata ajax, stampare un editor utilizzando il codice php e impostarne il display su none, in modo che l'editor non venga visualizzato sulla pagina.

ad es.

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

contenuti

2. funzione PHP per la risposta Ajax deve restituire solo solo testo. Non editor stesso e dovrebbe apparire come questo.

   funzione pubblica add_product() {

   // 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. quando la risposta viene ricevuto del contenuto del testo, utilizzando jQuery, creare un clone di "wp-editore-wrapper" div e aggiungerlo al posto di textarea e impostare il suo contenuto da una risposta giusta.