How to select tinyMCE textarea when pressing tab key?

tinymce tab
tinymce tabindex
tinymce tab plugin
tab focus plugin
tabfocus tinymce

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 ?

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.

tabindex, 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� This option enables you to specify an element ID to focus when the user presses the tab key inside the editor. You can also use the special ":prev" and ":next" values. It will then place the focus on either the previous or next input element placed before/after the TinyMCE instance in the DOM. Type: String. Example

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

How to select tinyMCE textarea when pressing tab key?, 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� The “If” condition statement means that the keyboard input was same as the input ASCII code number 9, which means “tab key”. This is very important, because html event handler will catch every moment of pressing any keyboard input and will react to it. We want this function work only with the tab key. That’s how the if statement works.

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

Tab Focus plugin | Docs, This setting can be used to change the focus behavior of the editor when the tab key has been pressed inside the editable area. tabfocus_elements. This option� Anyway, I decided to hook on the keyDownevent and listen to the tab key being pressed. This way I could manually jump focus to the next field when tab is pressed, or insert a tab character when Shift+Tab is pressed (for example). I used the tinyMCE event helper methods and wrote this (just add it right after the previous editor.onInit.add code) :

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.

Tab Focus Plugin, This setting can be used to change the focus behavior of the editor when the tab key has been pressed inside the editable area. tabfocus_elements. This option� This option allows you to specify which tabs the Help dialog should show, and in what order. The default TinyMCE tabs are called shortcuts, keyboardnav, plugins and versions. These tabs can be overwritten by providing a new tab panel specification with the same name, and new tabs can be added by registering a tab panel with a new name.

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

Help plugin | Docs, The help dialog can also be shown by pressing the keyboard shortcut Alt + 0 . add a tab called custom2 editor.on('init', function() { editor.plugins.help.addTab({ � This option is used to override default TinyMCE formats or add custom formats to the editor. TinyMCE is equipped with a formatting engine that allows you to register a set of styles and attributes as a named format. For example, the bold format is the style that is applied to text when the bold button is clicked.

Keyboard shortcuts | Docs, keyboard shortcuts. This is a list of available keyboard shortcuts within the editor body. Select All, Ctrl+A, Command+A, core. Redo, Ctrl+Y (such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item), Shift+Tab, Shift+Tab. Focus next Some modifiers map to different keys, depending on the user's operating system. The table plugin adds table management functionality to TinyMCE. It also adds a new menubar item Table with various options in its dropdown including Insert table and options to modify cells, rows and columns, and a toolbar button with the same functionality.

Tabindexing and inserting tabs with tinyMCE, I choose the easiest way, letting the browser do most of the job. always add a tab character when you press the tab key in a tinyMCE editor,� This plugin adds a preview button to the toolbar. Pressing the button opens a dialog box showing the current content in a preview mode. It also adds a menu item Preview under the File and View menu dropdowns.

Forum / TinyMCE / Tips, Tricks & HowTo's / Tab key , The Most Advanced WYSIWYG HTML Editor. Also in FireFox, pressing tab on the last cell of a table inserts a new row. However Any possibility that the tab key function could be a setting, like tab key as indent ON/OFF?? If you enter enough text into the textarea so that it begins to scroll, and then you hit the tab key, the window scrolls to the top. Pressing any other key after this scroll will bring the focus back to where it should be.

Comments
  • That sounds good but returns error ---- Uncaught TypeError: Cannot call method 'focus' of undefined
  • I think it can't find the "textarea" because the tinyMCE object exists... I have try with the textarea's ID and NAME instead of "textarea" in get() but still wont work.
  • I did it with ----> tinyMCE.activeEditor.focus();
  • be aware that if you have several editors on one page activeEditor may refer to another editor (i.e. when you wrote text in editor nr 2, but then click a button in editor nr 1)
  • This code will not work in every case. If you have more than 2 elements to be focus. For Eg. If your sequence is 1-2-3. that means if you lost focus from 1 then go to 2 and then 3. but if you want to go directly form 1 to 3 and you tried to click on 3, then the focus will be set to 2 not to 3. I tried this and had faced the same problem.
  • unfortunately it doesn't work with set focus on <label for="tinyMCE">