During my work for Journalizer I created a plugin for TinyMCE. What does it do? Well, it solves a problem, but which one? We have list of TinyMCE-controlled textareas and it is so common that you use the tab-key to jump to the next field that we wanted that as well. Unfortunately, this doesn’t work in TinyMCE.
Why is that? When using TinyMCE, you declare a HTML form element as “managed” by TinyMCE. What it does is substituting the actual HTML element with an iframe that can be edited like rich text. I.e. you can make things bold and italic and all that just with a click on button and you immediately see the results — nice. But because the actual textarea gets replaced by the iframe, common “tabbing” through your form elements no longer works because iframes are no form elements — not so nice.
What the plugin does is intercepting keyboard events for the current iframe. When tab is hit, it looks up the next element to focus and voilà turns over the focus. Just as if it were a regular form element.
How does the plugin determine the next element? Simple, you define it (see below). The advantage here is that every HTML is unique and there is no way to make automated assumptions about which element is the next. Your target elements can be any HTML element, not only instances of TinyMCE.
Here’s how you use the plugin:
Unpack it into your tiny_mce/plugins/
Configure it (see below)
In your tinyMCE.init() function add tabjump to the plugins list and set the tabjump_to option to the target element of your instance: