Possible Duplicate:
How to load wp_editor() through AJAX/jQuery

I know that this has been asked before but it has not been answered fully or accurately or descriptively. I know how to load the wp_editor on page load like this:

<?php wp_editor( $content, 'bio', $settings = array() );  ?>

But that doesn't work when loading the editor via ajax.

My plugin loads a list of football players. When a player is clicked, the wrapper div on the page is replaced with the data for that specific player. Part of that needs to be an instance of wp_editor.

The wrapper div is replaced with the form below. The last row in the form needs to have the wp_editor loaded in it.

This jQuery replaces a the 'tfb_replace' div with the response which in this case is a form.

$.post(ajaxurl, data, function(response) {

And here is the form:

    <form method="POST" action="" name="edit_player_form" enctype="multipart/form-data"> 
    <table class="form-table">
        <tr valign="top">
            <th scope="row"><label for="player_pic">Profile Image</label></th>
            <td><input name="player_pic" value="<?php echo $object->player_pic; ?>" /></td>
        <tr valign="top">
            <th scope="row"><label for="player_height">Height</label></th>
            <td><input name="player_height" value="<?php echo $object->player_height; ?>" /></td>
        <tr valign="top">
            <th scope="row"><label for="player_weight">Weight</label></th>
            <td><input name="player_weight" value="<?php echo $object->player_weight; ?>" /></td>
        <tr valign="top">
            <th scope="row"><label for="player_year">Years in School</label></th>
            <td><input name="player_year" value="<?php echo $object->player_year; ?>" /></td>
        <tr valign="top">
            <th scope="row"><label for="player_position">Category</label></th>
                <select name="player_cat">
                    <option value="<?php echo $object->player_cat; ?>"><?php echo $object->player_cat; ?></option>
                    <option value="Mayor">Mayor</option>
                    <option value="Intermedia">Intermedia</option>
                    <option value="Juvenil">Juvenil</option>
        <tr valign="top">
            <th scope="row"><label for="player_year">Bio</label></th>
            <td><!-- wp_editor would load here --></td>
    <input type="button" name="edit" value="Save Edits" class="button-primary" />&nbsp;&nbsp;&nbsp;
    <input type="button" name="remove" value="Remove Player" class="button-primary" />
    <input type="hidden" name="player_id" value="<?php echo $object->id; ?>" />
  • Maybe you should try output buffering.
    – Anh Tran
    Sep 20, 2012 at 14:33
  • 2
    Hey, i've tried some solutions, and to add it by Ajax you will need to really dive in to how TinyMCE works, because there is a problem, when you call wp_editor, it inserts a bunch of scripts on your page for you, and that is a problem that you cannot fix by just adding them to the page, there is a lot of JavaScript logic to be done, not easy ones.
    – Webord
    Sep 23, 2012 at 3:05

1 Answer 1


Add this to your plugin file: (you can also add it on the theme's functions file)

function ajax_wp_editor()
     your html form here
//for all users
add_action('wp_ajax_nopriv_ajax_wp_editor', 'ajax_wp_editor');
// for logged in users
add_action('wp_ajax_ajax_wp_editor', 'ajax_wp_editor');

Request Ajax using this URL:


Not the answer you're looking for? Browse other questions tagged or ask your own question.