Using jQuery to Skip the TinyMCE Editor Toolbar When Using the Tab Key

Problem: When using TinyMCE, the toolbar buttons (as well as one A tag w/no content used for a tooltip) are part of the tab order of the page so tabbing out of one control into the editor means tabbing through all the buttons before you get to the content.

Solution: Use jQuery to set the tabindex on these elements to -1 so they are skipped.

Things That Don't Work Like You First Expect:

  1. Using jQuery as you normally would so it fires on document ready won't work since your TinyMCE instance isn't done initializing yet.
  2. IE sucks.

Workarounds

To work around the first problem, we set a callback in TinyMCE's init() function to do our thing after it is done doing it's thing:

tinyMCE.init({
                mode : "exact",
                elements : "about",
                theme: "advanced",
                ...all your advanced options...
                init_instance_callback : "setTabIndex"
            });

The last line is where we set our callback. So, now we need to create a function named setTabIndex to do our jQuery magic:

function setTabIndex()
            {
                $(".mceToolbarContainer > *").attr("tabIndex", "-1");
            }

This selects all children of any element with the class mceToolbarContainer which is the class of the SPAN containing the toolbar and sets the tabindex attribute to -1. On my toolbar, the only items I need to set the tabindex on are A and INPUT elements. However, since I'm not sure what elements the other toolbar buttons use I'm just going to set the tabindex on everything. 

For the second problem, those of you with a keen eye (or that have been bitten by IE too many times) may have noticed in the jQuery code, I used "tabIndex" (camel case) instead of "tabindex". (lowercase). Firefox is just fine with lowercase attributes but IE needs camel case.

Now, when you load up your page, you should see your TinyMCE init and then if you tab into the editor, you should be taken directly to the content and not have to tab through the toolbar buttons.

If you have any feedback or corrections, let me know in the comments. 

6 thoughts on “Using jQuery to Skip the TinyMCE Editor Toolbar When Using the Tab Key

  1. I noticed that while this works almost perfectly, foreground color, the dropdown arrow for it and the background color and the dropdown arrow for it still get tab focus. That’s four additional items to tab through, even though it skips the rest. Just posting in case someone knows a fix or so the next person doesn’t think they’re crazy.

  2. I tried this fix on the latest version, and I had to change the function to this:
    $(“.mceToolbar *”).attr(“tabIndex”, “-1”);

    Thanks a bunch!

  3. Unfortunatelly tab_focus is does not work under Chrome (it select first the toolbar icons than the editor area) while under Firefoy is good.

    Any idea?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s