How do you set the focus of a TinyMCE textarea ele

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

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 2

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 3

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 4

This should pass focus to the TinyMCE textarea:

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

Answer 5

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 6

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

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