wp_editor() in content that was loaded with ajax

3 Views

I try to use wp_editor() in content that was loaded with ajax, but none of the required files and some other configuration script not loaded :

The structure of ajax is something like this:

Read More
function get_test_page(){
   include( TEMPLATEPATH . '/page.php' );
   die( main() );
}
add_action( 'wp_ajax_nopriv_get_test_page', 'get_test_page' );
add_action( 'wp_ajax_get_test_page', 'get_test_page' );

page.php : 

function main(){
    wp_editor('','unique_id');
}

Editor is loaded but needed files is not loaded.

  • http://.../wp-includes/js/tinymce/wp-tinymce.php

  • http://.../wp-includes/js/tinymce/skins/lightgray/skin.min.css

  • http://.../wp-admin/load-scripts.php?c=1&load%5B%5D=...mce-view,imgareaselect,image-edit,word-count,editor,quicktags,wplink,thick..

  • http://.../wp-includes/js/tinymce/langs/{}.js

  • ...

Some related post but doesn’t help me :

use wordpress wp_editor in dynamic/ajax html

How to load wp_editor() through AJAX/jQuery

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Solution:

    Add wp_editor() in somewhere that works perfectly and hide it.

    <div class="hidden-editor-container" style="display:none;">
    <?php wp_editor( '', 'editor' ); ?>
</div>

    after that assign editor contents to the global JS variable.

    EDITOR = $('.hidden-editor-container').contents();

    Finally when the ajax page is loaded append editor contents

    $('.editor').append( EDITOR );

tinymce.execCommand( 'mceRemoveEditor', false, 'editor' );
tinymce.execCommand( 'mceAddEditor', false, 'editor' );