web-dev-qa-db-fra.com

Comment définir le focus d'un élément textarea TinyMCE?

J'utilise TinyMCE pour une zone de texte sur une page mais elle ne joue pas dans l'ordre de tabulation des autres éléments.

Je peux utiliser le code suivant pour capturer lorsque je quitte le premier élément:

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

Comment puis-je définir le focus sur un éditeur TinyMCE?

jqueryfocustinymce
23
Failpunk

Enfin trouvé une réponse ... utilisez la commande:

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

Pour mes besoins, "id_of_texterea" était "description", c'est-à-dire 

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

Dans l'élément de formulaire qui a précédé mon textarea, j'ai ajouté le execCommand ci-dessus à l'action "onblur" de l'élément.

41
jbnunn

Je sais que ceci est un ancien post, mais je voudrais juste ajouter mon opinion sur le fait que l'éditeur soit ouvert et que le focus ne fonctionne pas. Voici ce que j'ai trouvé qui a fonctionné pour moi:

tinyMCE.activeEditor.focus();

Je devais définir cela dans un événement window.setTimeout en raison de la façon dont j'utilisais les objets JS, etc. J'espère que cela t'aides.

21
David

La mise au point fonctionne également comme ceci:

tinyMCE.get('id_of_textarea').focus()

Découvrez le plugin tabfocus, qui fait exactement ce que vous voulez:

http://tinymce.moxiecode.com/tryit/tab_focus.php

12
zzz

Si vous utilisez tinymce avec JQuery. Ce qui suit fonctionnera

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

Vous ne pouvez le faire qu'après l'initialisation de l'éditeur et vous devrez peut-être attendre l'un de ses événements d'initialisation.

9
robyates

Ce qui fonctionne réellement, c’est de définir une option dans la configfile (ou le fichier jquery). Cette option vous permet de mettre au point automatiquement une instance de l’éditeur. La valeur de cette option doit être un identifiant d'instance d'éditeur. L'ID d'instance de l'éditeur est la variable id de l'élément textarea ou <div> d'origine remplacé.

Exemple d'utilisation de l'option auto_focus:

tinyMCE.init({
    //...
    auto_focus : "Elm1"
});
7
Erwin Odendaal

On dirait que pour TinyMCE 4, certaines de ces solutions ne fonctionnent plus.  

// Ne semble pas fonctionner sur TinyMCE 4

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

// n'a pas fonctionné 

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

tinyMCE.activeEditor.focus();

Ce qui fonctionne pour moi

// Fonctionne très bien dans Chrome, mais pas du tout dans Firefox

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

// Ajoute ceci pour que Firefox fonctionne aussi

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);
}
6
VGruenhagen
tinyMCE.get ('Description'). getBody (). focus ();

Ce qui précède fonctionne également dans Firefox, Chrome et IE. Je n'ai pas testé dans d'autres navigateurs.

5
Pranab Gupta

Cela devrait passer du focus à la textarea TinyMCE:

$("#id_of_tinyMCE_area").focus();
2
Mike Trpcic

Pour la mise au point automatique, la documentation du premier exemple indique que - https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

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

Cela fonctionne pour moi dans Version TinyMCE4.7.6

2
Maniruzzaman Akash

J'utilise la fonction suivante pour focaliser l'éditeur avec thinyMCE Ceci utilise jQuery, mais il serait facile de le supprimer et d'utiliser document.querySelectorAll(). Utilisez babel si vous en avez besoin dans 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();
  }
}

EditorContainer est un élément quelconque entourant la zone de texte tinyMCE, par exemple. un div avec id 'text-container' que vous pouvez appeler focusEditor($('#text-container')) ou dans React focusEditor(React.findDOMNode(this))

0
steven iseki

Cela fonctionne pour moi (TinyMCE version 4.7.6):

tinymce.activeEditor.fire("focus")
0
Serhii Maksymchuk