How to load wp_editor via AJAX

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.

Related Posts: