Forcing the Tab key to indent content in TinyMCE and Drupal

I am using a Drupal 5 site as part of our Intranet system to help keep track of internal documentation. When we upgraded to Firefox 3, users were suddenly unable to hit the TAB key on their keyboards in order to indent content inside of the TinyMCE textarea (http://www.glazman.org/weblog/dotclear/index.php?post/2008/08/06/GRRRRRRR).

After quite an extensive search, I have finally pieced together the code required to resolve this issue. I am using the WYSIWYG module, along with TinyMCE 3.2.6, so these instructions may be somewhat specific to that installation, but I believe you'll be able to apply to them to a normal TinyMCE install as well.

For TinyMCE version 3.x (this same method does not work in 2.x), you will need to edit the tinymce.inc file, located inside of the wysiwyg module directory (editors/tinymce.inc).

Add the following code to the wysiwyg_tinymce_settings function, near the top:

'init_instance_callback' => "myCustomInitInstance",

Now, for whatever theme you are using inside of Drupal, you'll need to edit the page.tpl.php file and include some Javascript. I placed this content all the way at the bottom of that file, right before the ending body tag:

 

<script language="javascript" type="text/javascript" >
function myCustomInitInstance(inst) {
    inst.onKeyDown.add(function(inst, e) {
        // Firefox uses the e.which event for keypress
        // While IE and others use e.keyCode, so we look for both
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        if(code == 9) {
            // We could simulate tab by inserting nonbreaking spaces
            //  inst.selection.setContent('&nbsp;&nbsp;&nbsp;&nbsp;');
            // We could use the browser's indent command (lowercase i), which inserts a <blockquote>
            //  Or we can use TinyMCE's Indent command (uppercase I), which uses CSS padding
            //  This is what the Indent button on the TinyMCE toolbar does
            inst.execCommand('Indent');
            // This is critical..it prevents the Tab key from leaving the TinyMCE textarea
            // It took me forever to figure out how to do this
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    });

}
</script>