Add custom shortcode button to Editor

Before the new version of WordPress 3.0 came out I was using this jQuery code below to add custom buttons for my own shortcodes to the editor toolbar in the admin panel, it worked great. However with version 3 out now, it has stopped working, if I view source in admin panel I can see my code below is being loaded properly, it just doesn’t work anymore, does anyone know what has changed or how to fix to work with the newer version?

// Add CUSTOM buttons to html editor in admin!
add_action('admin_footer','custom_editor_buttons');

function custom_editor_buttons() {
    ?>
    <script type="text/javascript" charset="utf-8">
    <!--  Define our Editor buttons -->
    edButtons[edButtons.length] = new edButton(
        "hed_0",
        "Citation",
        "[ref]",
        "[/ref]",
        ""
    );
    edButtons[edButtons.length] = new edButton(
        "hed_1",
        "highlight",
        "<span class="su-highlight" style="background:#ddff99;color:#000000"> ",
        " </span>",
        ""
    );

    jQuery(document).ready(function (b) {
        <!--  Empty editor button tray -->
        <!-- then re-build it with our custom buttons -->
        jQuery("#ed_toolbar").empty();
        function hedShowButtons(button, i) {
            if ( button.id == 'ed_img' ) {
                jQuery("#ed_toolbar").append('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
            }else if (button.id == 'ed_link') {
                jQuery("#ed_toolbar").append('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
            }else {
                jQuery("#ed_toolbar").append('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
            }
        }
        for ( var i = 0; i < edButtons.length; i++ ) {
            hedShowButtons(edButtons[i], i);
        }
        jQuery("#ed_toolbar").append('<input type="button" id="ed_tabs" class="ed_button" title="Enable and disable tabbing" value="disable tabs" />');
        jQuery("#ed_toolbar").append('<input type="button" onclick="fullscreen.on();" id="ed_fullscreen" class="ed_button" title="Enable and disable fullscreen mode" value="fullscreen" />');
        jQuery("#ed_toolbar").append('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="' + quicktagsL10n.dictionaryLookup + '" value="' + quicktagsL10n.lookup + '" />');
        jQuery("#ed_toolbar").append('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="' + quicktagsL10n.closeAllOpenTags + '" value="' + quicktagsL10n.closeTags + '" />');

    });
    </script>
    <?php
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I found it, WordPress made changes and you can now add buttons through a simple API

if( !function_exists('_add_my_quicktags') ){
    function _add_my_quicktags()
    { ?>
        <script type="text/javascript">
        /* Add custom Quicktag buttons to the editor WordPress ver. 3.3 and above only
         *
         * Params for this are:
         * string id Required. Button HTML ID
         * string display Required. Button's value="..."
         * string|function arg1 Required. Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
         * string arg2 Optional. Ending tag like "</span>"
         * string access_key Optional. Access key for the button.
         * string title Optional. Button's title="..."
         * int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
         * string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present.(optional)
         */
        QTags.addButton( 'php', 'PHP', '[ php gutter="false" ]', '[ /php]' );
        QTags.addButton( 'js', 'JS', '[ js gutter="false"]', '[ /js]' );
        QTags.addButton( 'h2', 'H2', '< h2>', '< /h2>' );
        QTags.addButton( 'h3', 'H3', '< h3>', '< /h3>' );
        QTags.addButton( 'promt', 'Prompt', function(){
            QTags.insertContent(window.prompt() )
        });

        </script>
    <?php }
    // We can attach it to 'admin_print_footer_scripts' (for admin-only) or 'wp_footer' (for front-end only)
    add_action('admin_print_footer_scripts',  '_add_my_quicktags');
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0