WP Editor - wp_editor() is not showing properly on ajax call

Obviously wp_editor won't show up as you're making ajax call which only returns ajax response but not wp editor which is built by javascript on that page. In short, ajax call can get server side text response but not javascript editor which is built on client side and needs javascript processor to process.

Following can be suedo example of what can be done to make editor working.

  1. just below "add product" button, from where ajax call is being made, print a editor using php code and set its display to none so editor doesn't appear on page.

e.g.

<div class="wp-editor-wrapper" style="display: none;">
     <?php wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text')); ?>
</div>
  1. php function for ajax response should only return text content only. Not editor itself and it should look like this.

    public function 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();
    

    }

  2. when response is received of text content, using jQuery, create a clone of "wp-editor-wrapper" div and add it in place of textarea and set its content from ajax response.