CODEWITHSUNDEEP
phpjqueryajaxwordpresswp-editor
Omer
Omer

Reputation: 1796

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

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:

enter image description here

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:

enter image description here

Upvotes: 12

Views: 3538

Answers (2)

Alexander Tsaplev
Alexander Tsaplev

Reputation: 1

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

Upvotes: 0

Alpesh Panchal
Alpesh Panchal

Reputation: 1713

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.

Upvotes: 3

Related Questions