Enqueue Script After TinyMCE initialized

Adding scripts after TinyMCE:

You might check out the before_wp_tiny_mce and after_wp_tiny_mcehooks.

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&amp;$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.

Leave a Comment