Wie legen Sie den Fokus eines TinyMCE-TextArea-Elements fest?

Question

Ich benutze TinyMCE für ein Textfeld auf einer Seite, aber es spielt nicht gut in der Tab-Reihenfolge der anderen Elemente.

kann ich den folgenden Code verwenden, um zu erfassen, wenn ich Registerkarte aus dem ersten Elemente:

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

Wie kann ich den Fokus auf einen TinyMCE Editor festgelegt?

Answer 1

endlich eine Antwort gefunden ... verwenden Sie den Befehl:

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

Für meine Zwecke 'id_of_texterea' war "description", dh

In dem Formularelement, das meinem Textarea voranging, fügte ich den execCommand oben dem eleme hinzu nts "Onblur" -Aktion.

Answer 2

Dies sollte den Fokus auf das TinyMCE Textfeld übergeben:

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

Answer 3

Fokussierung funktioniert auch wie folgt aus:

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

Überprüfen Sie die tabfocus Plugin heraus, dass genau das tut, was Sie wollen:

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

Answer 4

Wenn Sie tinymce mit JQuery verwenden. Im Folgenden wird arbeiten

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

Sie können dies nur tun, nachdem der Editor obwohl initialisiert und so können Sie auf einer seiner Initialisierung Ereignisse warten.

Answer 5

Was eigentlich funktioniert, ist das Setzen einer Option in der configfile (oder jquery-Datei) Diese Option ermöglicht es Ihnen, eine Editor-Instanz automatisch zu fokussieren. Der Wert dieser Option sollte eine Editorinstanz-ID sein. Die Editorinstanz-ID ist id für das ursprüngliche Textfeld oder <div> Element, das ersetzt wurde.

Beispiel für die Verwendung der auto_focus Option:

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

Answer 6

Ich weiß, dass dies eine alte Post, aber nur meine Eingabe hinzufügen über den Editor geöffnet haben und konzentrieren sich nicht funktioniert. Was ich fand, die für mich gearbeitet, war dies:

tinyMCE.activeEditor.focus(); 

Ich hatte diese Einstellung vornehmen, in einem window.setTimeout Ereignis, weil, wie ich war mit JS Objekte und so. Hoffe das hilft.

Answer 7

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

// Scheint nicht 4 auf TinyMCE arbeiten

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

// Hat nicht funktioniert

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

tinyMCE.activeEditor.focus(); 

Was funktioniert für mich

// große Werke in Chrome, aber überhaupt nicht in Firefox

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

// Fügen Sie diese so auch Firefox

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 8

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

Die oben genannten Arbeiten in Firefox, Chrome und IE als gut funktioniert. Ich habe nicht in anderen Browsern getestet.

Answer 9

Ich habe es mit TinyMCE 4.x zu arbeiten, indem sie mit dem folgenden:

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

Answer 10

Ich verwende die folgende Funktion den Editor mit thinyMCE konzentrieren Diese jQuery verwendet, aber wäre einfach zu entfernen und verwenden document.querySelectorAll(). 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 jedes Element, das das tinyMCE-Textfeld umgibt, z. ein div mit id 'text-Container' Sie focusEditor($('#text-container')) nennen könnte oder in Reaktion focusEditor(React.findDOMNode(this))

Answer 11

Für Autofokus in tinymce der Dokumentation erstes Beispiel sagt, 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 in TinyMCE Version4.7.6

Answer 12

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

tinymce.activeEditor.fire("focus")