Dynamically created Wordpress Wysiwyg editor (wp_editor) does not display correctly

Question

I have 2 hysml wysiwyg editors on wordpress admin page. Both use the WP_EDITOR () function. The first one is hardcoded on 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 is dynamically generated using the PHP function using an AJAX call (wp_ajax_ and $ .post). I am testing an ajax call and know that it works; therefore, 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 when displaying a second editor; it skips all the toolbar buttons. See the image below for an illustration. Does anyone know who to fix this?

Answer 1

You probably need to add the media_buttons and tinymce parameter to your AJAX call.

Something like that:

 <?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 out the wp_editor () Feature Reference in Wordpress Codex.

Answer 2

I had the same problem.

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

Answer 3

Hey, I had the same problem too!

I just turned off all the plugins that were installed by me and refresh the page, and then I tried to also edit the post / pages in the visual area. Check as soon as it works for you. :)

Answer 4

I had the same problem:

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

Passing the identifier (the second parameter in wp_editor), I got the buttons. Like this:

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

Answer 5

I had the same problem and it was solved this way (WP 4.7):

First, create a hidden editor in your template so that WP downloads all the necessary files for TinyMCE (the identifier does not matter):

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

Then, after adding a 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 did not work for me, as the new editor id was not recognized. These two lines restore fast tags and add a new editor.