CODEWITHSUNDEEP
jqueryfocustinymce
Justin
Justin

Reputation: 4263

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

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?

Upvotes: 40

Views: 69658

Answers (13)

Pranab Gupta
Pranab Gupta

Reputation: 360

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

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

Added:

Note: The string Description is the ID (without the # !) for the textarea element that has the tinymce class (that is, the textarea element used to anchor the TinyMCE editor).

23-Oct-15: Confirmed to work with TinyMCE 4.1.9 (2015-03-10)

Upvotes: 13

DerpyNerd
DerpyNerd

Reputation: 4803

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.

Upvotes: 1

Serhii Maksymchuk
Serhii Maksymchuk

Reputation: 5424

This works for me (TinyMCE version 4.7.6):

tinymce.activeEditor.fire("focus")

Upvotes: 2

Maniruzzaman Akash
Maniruzzaman Akash

Reputation: 5025

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

Upvotes: 3

svnm
svnm

Reputation: 24328

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

Upvotes: 0

SieGeL
SieGeL

Reputation: 305

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

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

Upvotes: 0

VGruenhagen
VGruenhagen

Reputation: 1497

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

Upvotes: 12

robyates
robyates

Reputation: 321

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.

Upvotes: 11

Erwin Odendaal
Erwin Odendaal

Reputation: 71

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"
});

Upvotes: 7

David
David

Reputation: 371

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.

Upvotes: 37

zzz
zzz

Reputation: 161

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

Upvotes: 16

jbnunn
jbnunn

Reputation: 6355

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.

Upvotes: 52

Mike Trpcic
Mike Trpcic

Reputation: 25659

This should pass focus to the TinyMCE textarea:

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

Upvotes: 2

Related Questions