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

Question

I'm creating a WordPress plugin. It has a functionality to show the editor when adding a product through AJAX but the the editor is not showing properly.

User can add as many products as he want so keep in mind that there will be more than one wp_editor()

Please refer to the attached screenshot:

I have used the following code:

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

I have used a solution from the internet but its partially working not fully. Used the following code:

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

And the code above does this:

Answer 1

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>

2. 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();
   

   }

3. 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.