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:
- Using jQuery as you normally would so it fires on document ready won't work since your TinyMCE instance isn't done initializing yet.
- IE sucks.
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:
mode : "exact",
elements : "about",
...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:
$(".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
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.