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

Omer Published at Dev

Omer

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:

Alpesh Panchal

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-23

Comments

0 comments

From Dev

Related Related

Article

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

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

load wordpress wp_editor dynamically (ajax)

How to properly use wp_editor() from frontend

Google maps <iframe> code not showing properly from wp text editor

Replacing a textarea with WordPress TinyMCE wp_editor()

wordpress how to add wp_editor in an array

Include TinyMCE plugins with Wordpress wp_editor?

Prevent wp_editor to alter initial content

Using wp_editor output correctly

Replacing a textarea with WordPress TinyMCE wp_editor()

Error in buddypress when using wp_editor

How to detect changes in wp_editor?

wp_editor: How to load wp_editor on demand using jQuery?

WordPress wp_editor removes html tags - how to stop it?

<p></p> missing with wp_editor( get_option() );

using wp_editor to edit post title on the front end

WP link not showing properly on linkedin

Call async method properly on WP8.1

AJAX Call - Does not recognize WP_Query

Tiles not showing up properly in WP8.1 Silverlight app

implement wp-editor in a wordpress page

How to make an AJAX call in WP plugin on the front end

How to make an AJAX call in WP plugin on the front end

ajax in wp front end

showing no posts on wp_query

Css not working properly in codemirror editor

Distance lines are not showing in interface editor

tinyMCE the textbox is showing beneath the editor

tinymce editor content value not showing

froala unordered list not showing in editor