I am making a small live preview area inside a meta box using jquery where i need to get content from tinymce editor. But it seem my script loads before tinymce, this returns null when i try to get content from editor field.
Enqueue:
add_action('admin_enqueue_scripts', 'wpk_popup_admin_script', 100);
function wpk_popup_admin_script($hook) {
global $post;
if( 'edit.php' != $hook && $post->post_type != 'wpk_popup' )
return;
if(is_admin()){
wp_enqueue_script( 'jquery' );
wp_register_script( 'wpk-popup-admin', plugins_url('/js/admin.js', __FILE__), array('jquery'), false, true);
wp_enqueue_script( 'wpk-popup-admin' );
}
}
Tried adding editor
on dependency but its no use. The script prints just before the tinymce configuration.

jQ Code for getting editor content:
html += jQuery('#content_ifr').contents().find('#tinymce').html();
Which returns NULL
.
Resolved:
Thanks to @birgire, I was able to solve the problem. Here is the final code.
add_action( 'after_wp_tiny_mce', 'custom_after_wp_tiny_mce' );
function custom_after_wp_tiny_mce() {
printf( '<script type="text/javascript" src="https://wordpress.stackexchange.com/questions/76195/%s"></script>', plugins_url('/js/admin.js', __FILE__) );
}
For Getting or Inserting data I prefer to use tinymce api instead of jquery hack. So,
Getting Data
var content = tinyMCE.activeEditor.getContent();
Inserting Content
tinymce.activeEditor.execCommand('mceInsertContent', false, 'Text to insert goes here')
Adding scripts after TinyMCE:
You might check out the before_wp_tiny_mce
and after_wp_tiny_mce
hooks.
If you take a look at the file /wp-includes/class-wp-editor.php
you can see that the TinyMCE
settings scripts are not all loaded through the usual enqueue
methods, but some are displayed via:
add_action( 'admin_print_footer_scripts', array( __CLASS__, 'editor_js'), 50 );
where the editor_js
method contains this code:
...cut...
do_action('before_wp_tiny_mce', self::$mce_settings);
?>
<script type="text/javascript">
tinyMCEPreInit = {
base : "<?php echo self::$baseurl; ?>",
suffix : "<?php echo $suffix; ?>",
query : "<?php echo $version; ?>",
mceInit : <?php echo $mceInit; ?>,
qtInit : <?php echo $qtInit; ?>,
ref : <?php echo self::_parse_init( $ref ); ?>,
load_ext : function(url,lang){var sl=tinymce.ScriptLoader;sl.markDone(url+'/langs/'+lang+'.js');sl.markDone(url+'/langs/'+lang+'_dlg.js');}
};
</script>
<?php
$baseurl = self::$baseurl;
if ( $tmce_on ) {
if ( $compressed ) {
echo "<script type="text/javascript" src="https://wordpress.stackexchange.com/questions/76195/{$baseurl}/wp-tinymce.php?c=1&$version"></script>\n";
} else {
echo "<script type="text/javascript" src="{$baseurl}/tiny_mce.js?$version"></script>\n";
echo "<script type="text/javascript" src="{$baseurl}/wp-tinymce-schema.js?$version"></script>\n";
}
if ( 'en' != self::$mce_locale && isset($lang) )
echo "<script type="text/javascript">\n$lang\n</script>\n";
else
echo "<script type="text/javascript" src="{$baseurl}/langs/wp-langs-en.js?$version"></script>\n";
}
...cut...
do_action('after_wp_tiny_mce', self::$mce_settings);
So if you want to add a custom script after all the TinyMCE
scripts, you could emulate it’s own (non-elegant) way above through the after_wp_tiny_mce
hook:
add_action( 'after_wp_tiny_mce', 'custom_after_wp_tiny_mce' );
function custom_after_wp_tiny_mce() {
printf( '<script type="text/javascript" src="https://wordpress.stackexchange.com/questions/76195/%s"></script>', plugins_url('/js/admin.js', __FILE__) );
}
This raises the question why not all the TinyMCE
scripts are loaded via enqueue.
The hook admin_print_footer_scripts
is too late for adding new scripts via enqueue, so it could be that some of these TinyMCE
scripts must be loaded very late on the page.
Capturing the editor content with jQuery:
You could also try this snippet, enqueued the normal way:
jQuery(window).load( function() {
// test 1:
//var ed = tinyMCE.activeEditor;
//console.log( ed.getContent() );
// test 2:
// console.log( jQuery('#content_ifr').contents().find('#tinymce').html() );
// test 3:
if( jQuery('#content').length > 0 ){
console.log( jQuery('#content').html() );
}
});
to get the editor content.