Customizing HTML Editor Quicktags button to open a dialog for choosing insert options

I am looking for adding custom quicktag buttons, that would allow me to display a intermediary dialog before inserting the code.

Situation

1. Clicking a quicktag button opens a dialog or thickbox modal window.
2. Opened dialog displays some options on the class, etc and an Insert button.
3. Clicking “Insert” button inserts the code.

Background

To add an quicktags button, we would use

edButtons[ edButtonsLength+ ] = new edButton(
    'ed_mybutton' , 'Insert button', '<div class="class-name">', '</div>'
);
////
edHTML += '<input type="button" value="Insert custom code" id="ed_my_button" class="ed_button" onclick="edInsertTag( edCanvas, edButtonLength_t + 1)" title="Insert code" />';

Now how can i bypass the button to open a dialog(or thickbox modal) instead?

I can add a button without defining it, like

edHTML += '<input type="button" value="Insert custom code" id="ed_my_button" class="ed_button" onclick="customFunction()" title="Insert code" />';
// and
var customFunction = function() {
   openURL = '<?php admin_url() ?>admin-ajax.php?action="insertCodeAction&TB_iframe=true';
   tb_show( 'Insert custom code', openURL );
};

Please share your wisdom. Thanks in advance.

PS: doing this with TinyMCE is relatively easy, i wonder how do i do that with HTML quicktags. 🙂

According to the Codex, you can’t do this directly through the API. However, you can do it by using your own quicktags.js file as shown below.

function sample_load_admin_scripts()
{
  if ( is_admin() ) {
    wp_deregister_script('quicktags');
    wp_register_script('quicktags', ("/path/to/your/quicktags.js"), false, '', true);
  }
}

if (is_admin()) {
  add_action('init', sample_load_admin_scripts);
}

Then just add Javascript to do your work. The formatting is relatively easy, but since you know how to do everything with TinyMCE I’m not going to go into that. Go get a quicktags.js file of your own here.