Shortcode Dropdown WordPress - Text Editor Only

Question

I am trying to add a shortcode dropdown onto the pure text editor in WordPress page editor next to the add media buttons. I've seen a lot of questions relating to the dropdown, but they are all specifically for the tinyMce editor and not the pure text editor.

The visual editor has been disabled on my WordPress website but I would still like the users to be able to see all the shortcodes available.

Any help would be greatly appreciated.

Answer 1

Looks like the Quicktags API only accepts buttons, but we can trick the system with some jQuery as it does all sort of things ;)

The shortcode dropdown is built from var data and its behavior should be ajusted onchange:

add_action( 'admin_print_footer_scripts', 'quicktags_so_42200158' );

function quicktags_so_42200158() {
    if ( wp_script_is( 'quicktags' ) ) {
        wp_enqueue_script('jquery');
        ?>
        <script>
        /* Button name and callback will be replaced */
        QTags.addButton( 'dummy_button', 'Dummy button', function(){} );

        jQuery(window).load( function() {
            jQ = jQuery;

            /* Build dropdown - http://stackoverflow.com/a/4814600 */
            var data = {
                '-': 'Select shortcode',
                'video': 'Video',
                'audio': 'Audio'
            }
            var s = jQ('<select />');
            s.attr('id','my-shortcodes');
            for(var val in data) {
                jQ('<option />', {value: val, text: data[val]}).appendTo(s);
            }

            /* Change 'Dummy button' for dropdown */
            jQ('#qt_content_dummy_button')[0].outerHTML = s[0].outerHTML;

            /* What will be inserted on HTML editor */
            jQ('#my-shortcodes').on('change', function(){
                var sc = '[' + jQ(this).val() + ']';
                QTags.insertContent(sc);
            });
        });
        </script>
        <?php
    }
}

_{Reference: A Deeper Look Into the WordPress Text Editor}