Add custom shortcode button to Editor

1 Views

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",
        "[highlight]",
        "[/highlight]",
        ""
    );

    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
}
Post Views: 1

Related posts

Leave a Reply

1 comment

  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');
}