Add a jQuery function to admin pages

Question

I need to add a bit of document ready jQuery to post/page editors in admin. I'm hacking an old plugin that adds a text box to the editor page and handles inserting that text in a template file, but the text input is only html; this document ready function adds the class of mceEditor to the text box. This function works when I manually include it in admin-header.php, but I can't do that, of course.

I don't think I need to enqueue it, as it is not a library. Or do I? And, if applicable: what are the pros/cons of different ways to add it?

So how do I hook this or otherwise load it into the post/page editors in admin? It needs to go into the plugin file, not functions.php in the theme.

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>

Answer 1

I'd be inclined to just do a one off enqueue and be done with it..

It means you have to manage an additional file(the JS file), but when you're writing code it's usually a good idea to create some form of organisation with your files(or at least get into the habit of doing so), ie. javascript/jquery in one folder, css is another, keeping PHP and HTML in your main plugin PHP files.

So my suggestion would be to move the jQuery into a js file, then run an enqueue setting jQuery as a dependancy, but no need to register it for a one off call.

Quite a few choices with regard to hooks, but i'd personally go for..

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
        return;

    wp_enqueue_script( 
        'your_script_handle',                         // Handle
        plugins_url( '/yourfilename.js', __FILE__ ),  // Path to file
        array( 'jquery' )                             // Dependancies
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Simply adjust the pages you need the enqueue to run on - in the in_array() call.

Answer 2

Some time ago I needed something like this, this is what I used:

function admin_js() { ?>
    <script type="text/javascript">

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action('admin_head', 'admin_js');

At that time, I just hooked it to the admin_head action, now I know there's a whole lot of actions. Perhaps in this case would be better to hook it to the admin_print_scripts action:

add_action('admin_print_scripts', 'admin_js');

Note: This will print the script in the page, if you want to keep it in an external file you'll have to queue it:

function admin_js() {
    wp_register_script('admin_js', plugins_url( .'/yourplugin/admin-js.js' . ),  array('jquery'));
    wp_enqueue_script('admin_js');
}
add_action('admin_enqueue_scripts', 'admin_js');

And in your admin-js.js file, the javascript:

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });

I'm using both this methods on option pages and both of them work with no problems.