How to select tinyMCE textarea when pressing tab key? - tinymce

Question

Hello
I got similar to that code
<form method="post" action="/" name="form" autocomplete="off">
<input type="text" name="title" />
<textarea name="body"></textarea>
<input type="text" name="tags" />
<input type="submit" name="submit" value="Send" />
</form>
Where the "textarea" is tinyMCE... problem comes when I try to move selection through input and textarea items.
When the page is loaded it focus input[name=text] but when I press Tab key it select input[name=tags] instead textarea[name=body] (which is next)
Can you assist me with that issue ?

Answer 1

This is impossible with conventional tab indexes as TinyMCE actually hides the <textarea> and creates an <iframe> with the editor in it. You could make a work around by forcing focus on the editor in the blur event of the previous element in javascript, here is ajQuery snipped of the top of my head:
$('#prev-input').blur(function(){
tinyMCE.get('textarea').focus();
});
Then as soon as the user leaves the previous input focus would jump to the TinyMCE editor, you could possibly add a blur() method as well to got to the next element.

Answer 2

I resolved this with adding 'tabfocus' to plugins and then add tabfocus_elements : ":prev,:next"
http://tinymce.moxiecode.com/wiki.php/Plugin:tabfocus
http://tinymce.moxiecode.com/wiki.php/tabfocus_elements

Answer 3

There is a plugin solved it
http://sourceforge.net/tracker/index.php?func=detail&aid=1657397&group_id=103281&atid=738747
I known it from TinyMCE forum
http://tinymce.moxiecode.com/forum/viewtopic.php?id=813

Answer 4

I needed a custom tabbing order from another element on the page. The code I used to resolve this in IE11 was
var button = $('#btn-id');
button.on('keydown', function (e) {
if ((e.which === 9 && !e.shiftKey)) {
e.preventDefault();
$(tinyMCE.get()[0].contentWindow).focus();
}
});
Be aware that the above code will only work if you've only got one editor on the page. Otherwise you'll have to cycle through the array returned by tinyMCE.get() to find the correct editor to set focus to.

Answer 5

I found out that the focus event is being triggered but focussing in the element (container) didn't work all the time.
In my case I tabbed from editor 1 - 4 and when I shift+tab I lost focus on the instance.
To fix this I added the following to the setup event of tinyMCE
setup: function(editor) {
editor.on("focus", function(e) {
e.target.editorContainer.scrollIntoView();
});
}