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

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

This works for me (TinyMCE version 4.7.6):

tinymce.activeEditor.fire("focus")

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

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 5

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 6

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