functional quicktag

Question

I want to add quicktags that do more than just add markup. For instance, I would like to add a quicktag to run a function do apply a js regex on the page content. How can I add a quicktag that executes a function?

To give a specific example, I would like to add a button that removes all markup tags in the entire post text. This is analogous to the predefined quicktags for finding unmatched tags, or "proofread", etc.

Answer 1

Simple example that will add a Quicktag button that calls a Javascript function when it is clicked...

<?PHP
function _add_my_quicktags(){ ?>
    <script type="text/javascript">
    QTags.addButton( 'alert', 'Alert Button', simple_alert );

        function simple_alert() { 
            alert('hello, example callback function');
        }
    </script>
<?php 
}
add_action('admin_print_footer_scripts',  '_add_my_quicktags');
?>

UPDATE.... Adding a Callback function that utilizes the passed in variables...

    // Add a button called 'abbr' with a callback function
    QTags.addButton( 'abbr', 'Abbr', abbr_prompt );
    // and this is the callback function
    function abbr_prompt(e, c, ed) {
        var prmt, t = this;
        if ( ed.canvas.selectionStart !== ed.canvas.selectionEnd ) {
            // if we have a selection in the editor define out tagStart and tagEnd to wrap around the text
            // prompt the user for the abbreviation and return gracefully on a null input
            prmt = prompt('Enter Abbreviation');
            if ( prmt === null ) return;
            t.tagStart = '<abbr title="' + prmt + '">';
            t.tagEnd = '</abbr>';
        } else if ( ed.openTags ) {
            // if we have an open tag, see if it's ours
            var ret = false, i = 0, t = this;
            while ( i < ed.openTags.length ) {
                ret = ed.openTags[i] == t.id ? i : false;
                i ++;
            }
            if ( ret === false ) {
                // if the open tags don't include 'abbr' prompt for input
                prmt = prompt('Enter Abbreviation');
                if ( prmt === null ) return;
                t.tagStart = '<abbr title="' + prmt + '">';
                t.tagEnd = false;
                if ( ! ed.openTags ) {
                    ed.openTags = [];
                }
                ed.openTags.push(t.id);
                e.value = '/' + e.value;
            } else {
                // otherwise close the 'abbr' tag
                ed.openTags.splice(ret, 1);
                t.tagStart = '</abbr>';
                e.value = t.display;
            }
        } else {
            // last resort, no selection and no open tags
            // so prompt for input and just open the tag
            prmt = prompt('Enter Abbreviation');
            if ( prmt === null ) return;
            t.tagStart = '<abbr title="' + prmt + '">';
            t.tagEnd = false;
            if ( ! ed.openTags ) {
                ed.openTags = [];
            }
            ed.openTags.push(t.id);
            e.value = '/' + e.value;
        }
        // now we've defined all the tagStart, tagEnd and openTags we process it all to the active window
        QTags.TagButton.prototype.callback.call(t, e, c, ed);
    };

Answer 2

you should write a tinymce plugin, then load it (using tinymce advanced plugin)