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 out of the first element:

$('#title').live('keypress', function (e) {
   if(e.keyCode == 9) {
       alert('tabbed out');
   }
});

How can I set the focus to a TinyMCE editor?

Answer 1

Finally found an answer... use the command:

tinymce.execCommand('mceFocus',false,'id_of_textarea');

For my purposes, 'id_of_texterea' was "description", ie

<textarea id="description" ... ></textarea>

In the form element that preceded my textarea, I added the execCommand above to the element's "onblur" action.

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

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

Answer 4

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 5

Looks like for TinyMCE 4 a few of these solutions no longer work.

// Doesn't seem to work on TinyMCE 4

tinymce.execCommand('mceFocus',false,'id_of_textarea'); 

// Didn't work

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

tinyMCE.activeEditor.focus();

What works for me

// Works great in Chrome, but not at all in Firefox

tinyMCE.init({
    //...
    auto_focus : "id_of_textarea"
});

// Add this so Firefox also works

init_instance_callback : "customInitInstanceForTinyMce", // property to add into tinyMCE.init()

function customInitInstanceForTinyMce() {
    setTimeout(function () {                         // you may not need the timeout
        tinyMCE.get('Description').focus();
    }, 500);
}

Answer 6

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

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

Answer 7

What actually works is setting an option in the configfile (or jquery file) This option enables you to auto focus an editor instance. The value of this option should be an editor instance id. The editor instance id is the id for the original textarea or <div> element that got replaced.

Example of usage of the auto_focus option:

tinyMCE.init({
    //...
    auto_focus : "elm1"
});

Answer 8

For Auto focus in tinymce the documentation first example says that - https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

tinymce.init({
      selector: '#textarea_id',
      auto_focus: '#textarea_id'
});

This works for me in TinyMCE Version 4.7.6

Answer 9

This should pass focus to the TinyMCE textarea:

$("#id_of_tinyMCE_area").focus();

Answer 10

This works for me (TinyMCE version 4.7.6):

tinymce.activeEditor.fire("focus")

Answer 11

I've got it to work with TinyMCE 4.x by using the following:

tinymce.EditorManager.get('id_of_editor_instance').focus();

Answer 12

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 13

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.