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

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))