Dynamically generated Wordpress Wysiwyg Editor ( wp_editor ) not displaying properly

Question

I have 2 html wysiwyg editors on a wordpress admin page. Both use WP_EDITOR() function. The first one is hard coded into the page:

<form name="form1" id="form1" method="post" action="" style="display:block;">
  <p>
    <!-- editor here -->
    <?php
       wp_editor( 'CONTENT WILL APPEAR HERE!', 'addsometxt', array('textarea_name'=>'create_txt','textarea_rows'=>10,'wpautop'=>false));
    ?>
  </p>
  <p>
   <input name="save" type="submit" class="button-primary" id="save" style="margin:5px;" value="Save Input" /></p>
</form>

The second one is generated dynamically with a PHP function using an AJAX call (wp_ajax_ and $.post). I've test the ajax call and know it works; so, for brevity, here's the php function:

<?php
function display_editor2() {
// grab data from database (data_from_db) and display in editor
  wp_editor( $row->data_from_db, 'editsometxt', array('textarea_name'=>'edit_txt','textarea_rows'=>10,'wpautop'=>false));

} 
?>

The problem is that even though the 2nd editor is displaying; it's missing all the tool bar buttons. See image below for illustration. Anyone know who to fix this?

Answer 1

I had the same problem.

When I add the code <?php wp_footer(); ?> <?php wp_footer(); ?> in my footer.php, it works.

Answer 2

I had the exact same issue and solved it this way (WP 4.7):

First create an hidden editor in your template so WP load all the necessary files for TinyMCE (the ID doesn't matter):

<div style="display:none"><?php wp_editor('', 'hidden_editor'); ?></div>

Then after you appended the new editor to the DOM, use the following functions:

quicktags({id :'your_new_editor_id'});
tinymce.execCommand('mceAddEditor', true, 'your_new_editor_id');

Using tinymce.init didn't worked for me, as the new editor ID wasn't recognized. Those two lines reinstantiate the quicktags and add the new editor.

Answer 3

Probably you need to add media_buttons and tinymce parameter on your AJAX call.

Something like this:

<?php
function display_editor2() {
    // grab data from database (data_from_db) and display in editor
    wp_editor( $row->data_from_db, 'editsometxt', array('textarea_name'=>'edit_txt','media_buttons'=>true,'tinymce'=>true,'textarea_rows'=>10,'wpautop'=>false));

    } 
?>

I recommend you check wp_editor() Function Reference page at Wordpress Codex.

Answer 4

Hey I too had the same problem!

I just deactivated all the plug-ins which are installed by me and refreshed the page, and then I tried to edit the post/pages in the visual area also. Check once it will work for you. :)

Answer 5

I hade the same problem, using this:

<?php wp_editor(get_the_content()); ?>

By passing a ID (second parameter to wp_editor) I got the buttons. Like this:

<?php wp_editor(get_the_content(), "with_a_ID_its_buttons_are_showing"); ?>