How do you set the focus of a TinyMCE textarea element?

Question

I\'m using TinyMCE for a textarea on a page but it doesn\'t play nice in the tabbing order of the other elements.

I can use the following code to capture when I tab

Answer 1

tinyMCE.get('Description').getBody().focus();

The above works in Firefox, Chrome and IE as well. I have not tested in other browsers.

Answer 2

I know this is an old post, but just to add my input about having the editor open and focus not working. What I found that worked for me was this:

tinyMCE.activeEditor.focus();

I had to set this in a window.setTimeout event because of how I was using JS objects and such. Hope this helps.

Answer 3

I use the following function to focus the editor with thinyMCE This is using jQuery, but would be easy to strip this out and use document.querySelectorAll(). Use babel if you need this in es5.

let focusEditor = function(editorContainer) {
  let tinymce;
  if (/iPad|iPhone|iPod/.test(navigator.platform)) { return; }
  let id = $('.text-editor', editorContainer.innerHTML).first().attr('id');
  if (tinymce = window.tinyMCE.get(id)) {
    try {
      return tinymce.focus();
    } catch (error) {
      return tinymce.on('init', function() { return this.focus(); });
    }
  } else {
    return $(`#${id}`, editorContainer).focus();
  }
}

The editorContainer is any element surrounding the tinyMCE textarea, e.g. a div with id 'text-container' you could call focusEditor($('#text-container')) or in React focusEditor(React.findDOMNode(this))

Answer 4

TinyMCE 4.7.4

None of the above worked for me, subscribing to TinyMCEs init event did work:

const elTinyMce = tinyMCE.get('your_textarea_id');
// (optional) This is not necessary.
// I do this because I may have multiple tinymce elements on my page
tinyMCE.setActive(elTinyMce);
elTinyMce.on('init', function () {
    // Set the focus
    elTinyMce.focus();
    // (optional) Select the content
    elTinyMce.selection.select(
        elTinyMce.getBody(),
        true
    );
    // (optional) Collapse the selection to start or end of range
    elTinyMce.selection.collapse(false);
});

Note: focusing on elements doesn't always work if you have the browsers developer tools open. You may be forcing the focus away from the page because a browser can only have one focus. This solution for example doesn't work either if you have developer tools open.

Answer 5

If you're using tinymce with JQuery. The following will work

$("#id_of_textarea").tinymce().focus();

You can only do this after the editor has initialized though and so you may need to wait on one of its initialization events.

Answer 6

Focusing also works like this:

tinyMCE.get('id_of_textarea').focus()

Check out the tabfocus plugin, that's doing exactly what you want:

http://tinymce.moxiecode.com/tryit/tab_focus.php