Dynamically generated WordPress Wysiwyg Editor ( wp_editor ) not displaying properly

5 Views

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:

Read More
<?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?

enter image description here

Post Views: 5

Related posts

Leave a Reply

6 comments

  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.

  4. 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.

  5. 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. 🙂

  6. 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"); ?>