¿Cómo se establece el foco de un elemento textarea TinyMCE?

Question

Estoy usando TinyMCE para un área de texto en una página, pero no juega bien en el orden de tabulación de los otros elementos.

que puede utilizar el siguiente código para capturar cuando salta fuera del primer elemento:

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

¿Cómo puedo ajustar el foco a un editor TinyMCE?

Answer 1

encontrado por fin una respuesta ... utilizar el comando:

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

Para mis propósitos, 'id_of_texterea' era "descripción", es decir,

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

En el elemento de formulario que precedió a mi área de texto, agregué el execCommand anterior al eleme la acción "onblur" de nt.

Answer 2

Este enfoque debería pasar al área de texto TinyMCE:

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

Answer 3

Centrándose también funciona así:

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

Salida el plugin tabfocus, que está haciendo exactamente lo que quiere:

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

Answer 4

Si está utilizando tinymce con jQuery. El siguiente trabajo

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

sólo se puede hacer esto después de que el editor ha inicializado sin embargo y por lo que es posible que tenga que esperar en uno de sus eventos de inicialización.

Answer 5

Lo que realmente funciona es configurar una opción en el configfile (o archivo jquery) Esta opción le permite enfocar automáticamente una instancia del editor. El valor de esta opción debe ser una ID de instancia del editor. El Id. De instancia del editor es id para el elemento textarea original o <div> que fue reemplazado.

Ejemplo de uso de la opción de auto_focus:

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

Answer 6

Sé que esto es una entrada antigua, pero sólo para añadir mi entrada por tener el editor abierto y enfoque no funciona. Lo que encontré que trabajó para mí era la siguiente:

tinyMCE.activeEditor.focus(); 

tuve que configurar esto en un evento window.setTimeout por la forma en que estaba usando objetos JS y tal. Espero que esto ayude.

Answer 7

Parece que para TinyMCE 4 algunas de estas soluciones ya no funcionan.

// No parece que trabajar en TinyMCE 4

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

// no funcionó

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

tinyMCE.activeEditor.focus(); 

Lo que funciona para mí

// Funciona muy bien en Chrome, pero no en absoluto en Firefox

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

// Añadir este modo Firefox también funciona

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

lo anterior funciona en Firefox, Chrome e IE también. No lo he probado en otros navegadores.

Answer 9

Tengo que funcione con TinyMCE 4.x utilizando el siguiente:

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

Answer 10

utilizo la siguiente función para enfocar el editor con thinyMCE Esto es usando jQuery, pero sería fácil de quitar esto y usar document.querySelectorAll(). Use babel si necesita esto en 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(); 
    } 
} 

El editorContainer es cualquier elemento que rodea el área de texto tinyMCE, por ejemplo un div con id 'text-contenedor' que podría llamar focusEditor($('#text-container')) o en React focusEditor(React.findDOMNode(this))

Answer 11

para el enfoque automático en tinymce el primer ejemplo documentación dice que - https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

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

Esto funciona para mí en TinyMCE Versión4.7.6

Answer 12

Esto funciona para mí (versión 4.7.6 TinyMCE):

tinymce.activeEditor.fire("focus")