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:

Everything is working fine with the code right now I have. Just the editor that is not working. — Omer, Dec 07 '15 at 07:24
I've created a post for dynamicly loading wp editors [here](https://wordpress.stackexchange.com/questions/274592/how-to-create-wp-editor-using-javascript/354974#354974). — Bjorn, Dec 20 '19 at 00:40
I've created a post for dynamicly creating WP editor [here](https://wordpress.stackexchange.com/questions/274592/how-to-create-wp-editor-using-javascript/354974#354974). — Bjorn, Dec 20 '19 at 00:41

score 3 · Accepted Answer · answered Dec 20 '15 at 06:55

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.

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>

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

}

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.

Seems like a good solution... But how to set its content from ajax response? — Omer, Dec 21 '15 at 18:38
CKEDITOR.instance.[name used in CKEDITOR].setData(ajaxResponse); Can be used in ANY js file as long as it comes after ckeditor.js is loaded. — Alpesh Panchal, Dec 22 '15 at 06:19

score 0 · Answer 2 · answered Apr 13 '19 at 20:02

I guess I found more elegant solution by using window.QTags function. If you try to call tinyMCEPreInit from Debug console you should be able to reach qtInit property of object.

console.log(tinyMCEPreInit.qtInit);

It should return something like this

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

So after your ajax call is done, try to copy this property, replace an id to a new one and call the QTags function. All buttons should appear.

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

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

2 Answers2