How to select tinyMCE textarea when pressing tab key?

Hello I got similar to that code

<form method="post" act开发者_Go百科ion="/" 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 ?

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.

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

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

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.

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();
  });
}