How to load wp_editor via AJAX

Question

Does anyone know how o load wp_editor via AJAX in WordPress?

My markup and editor is getting loaded properly but editor controls are not getting loaded properly, it may be because Javascript is not running in AJAX call.

Any help would be appreciated.

Answer 1

The main problem are the missing scripts. The scripts enqueued in _WP_Editors::enqueue_scripts() are never printed. The same is true for _WP_Editors::editor_js().

So you have to do that in your AJAX callback handler. I have written a demo plugin and put it on GitHub: T5 AJAX Editor.

There is one class named Ajax_Editor. Its method render() prints the editor on AJAX requests.

public function render()
{
    if ( ! $this->validator->is_valid( TRUE ) )
        die( 'nope' );

    wp_editor( $this->data->get(), $this->editor_id, $this->settings );
    \_WP_Editors::enqueue_scripts();
    print_footer_scripts();
    \_WP_Editors::editor_js();

    die();
}

The exact order is important, an don’t forget the die() at the end. What doesn’t work yet is the media upload. I get a JavaScript error when I try to include that.

Note that calling print_footer_scripts(); will give you more than you expected: some plugins (Query Monitor for example) register their scripts even for AJAX requests, even if they don’t need them there.

Answer 2

After struggling with it, found the one line solution which works, in callback add:

tinymce.execCommand( 'mceAddEditor', true, element.id );

No idea why i couldnt find documentation inside tinymce.