it-swarm.com.de

Wie setzen Sie den Fokus eines TinyMCE-Textarea-Elements?

Ich verwende TinyMCE für ein Textfeld auf einer Seite, aber es wird nicht in der Tabulatorreihenfolge der anderen Elemente angezeigt.

Ich kann den folgenden Code verwenden, um zu erfassen, wann ich aus dem ersten Element heraus tabge:

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

Wie kann ich den Fokus auf einen TinyMCE-Editor setzen?

23
Failpunk

Endlich eine Antwort gefunden ... benutze den Befehl:

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

Für meine Zwecke war "id_of_texterea" "Beschreibung", dh 

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

In dem Formularelement, das meinem Textbereich vorangeht, habe ich den Befehl execCommand oben zur Aktion "onblur" des Elements hinzugefügt.

41
jbnunn

Ich weiß, dass dies ein alter Beitrag ist, aber ich möchte nur meinen Beitrag dazu hinzufügen, dass der Editor geöffnet ist und der Fokus nicht funktioniert. Was ich für mich gefunden habe, war folgendes:

tinyMCE.activeEditor.focus();

Ich musste dies in einem window.setTimeout -Ereignis festlegen, da ich JS-Objekte und dergleichen verwendete. Hoffe das hilft.

21
David

Die Fokussierung funktioniert auch so:

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

Schauen Sie sich das Tabfocus-Plugin an, das macht genau das, was Sie wollen:

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

12
zzz

Wenn Sie Tinymce mit JQuery verwenden. Folgendes wird funktionieren

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

Sie können dies nur tun, nachdem der Editor initialisiert wurde. Daher müssen Sie möglicherweise eines der Initialisierungsereignisse abwarten.

9
robyates

Was tatsächlich funktioniert, ist das Setzen einer Option in der configfile (oder Jquery-Datei). Mit dieser Option können Sie eine Editorinstanz automatisch fokussieren. Der Wert dieser Option sollte eine Editorinstanz-ID sein. Die Editor-Instanz-ID ist die id für den ursprünglichen Textbereich oder das <div>-Element, das ersetzt wurde.

Beispiel für die Verwendung der Option auto_focus:

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

Sieht aus wie für TinyMCE 4 funktionieren einige dieser Lösungen nicht mehr.  

// Scheint bei TinyMCE 4 nicht zu funktionieren

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

// funktionierte nicht 

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

tinyMCE.activeEditor.focus();

Was für mich funktioniert

// Funktioniert hervorragend in Chrome, aber überhaupt nicht in Firefox

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

// Dies hinzufügen, damit Firefox auch funktioniert

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

Dies funktioniert auch in Firefox, Chrome und IE. Ich habe in anderen Browsern nicht getestet.

5
Pranab Gupta

Dies sollte den Fokus auf den Textbereich TinyMCE legen:

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

Für den Autofokus in tinymce heißt es im ersten Beispiel der Dokumentation, dass - https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

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

Dies funktioniert für mich inTinyMCE-Version4.7.6

2

Ich verwende die folgende Funktion, um den Editor mit thinyMCE Zu fokussieren. Dies verwendet jQuery, aber es wäre leicht, dies herauszufinden und document.querySelectorAll() zu verwenden. Verwenden Sie babel , wenn Sie dies in es5 benötigen.

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

Der editorContainer ist ein beliebiges Element, das den tinyMCE-Textbereich umgibt, z. ein div mit der ID 'text-container', das Sie focusEditor($('#text-container')) oder in React focusEditor(React.findDOMNode(this)) aufrufen können

0
steven iseki

Ich habe es mit TinyMCE 4.x zu arbeiten, indem ich Folgendes verwendet habe:

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

0
SieGeL

Das funktioniert für mich (TinyMCE Version 4.7.6):

tinymce.activeEditor.fire("focus")
0