Как вы устанавливаете фокус элемента textarea TinyMCE?

Question

Я использую TinyMCE для текстового поля на странице, но он не играет хорошо в порядке табуляции других элементов.

я могу использовать следующий код для захвата, когда я вкладка из первого элемента:

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

Как я могу установить фокус на редактор TinyMCE?

Answer 1

Наконец нашел ответ ... используйте команду:

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

Для моих целей 'id_of_texterea' был "описание", то есть

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

В элементе формы, который предшествовал моему текстовому пространству, я добавил execCommand выше в eleme nt "onblur".

Answer 2

Это должно передать фокус в текстовое поле TinyMCE:

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

Answer 3

Фокусировка также работает следующим образом:

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

Отъезд TabFocus плагин, который делает именно то, что вы хотите:

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

Answer 4

Если вы используете TinyMCE с JQuery. Ниже будет работать

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

Вы можете сделать это только после того, как редактор инициализации, хотя и поэтому вам, возможно, придется ждать на одном из его инициализации событий.

Answer 5

Что действительно работает, это установка опции в configfile (или файл jquery). Эта опция позволяет вам автоматически сфокусировать экземпляр редактора. Значение этого параметра должно быть идентификатором экземпляра редактора. Идентификатор экземпляра редактора - это id для исходного текстового поля или <div>, который был заменен.

Пример использования опции auto_focus:

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

Answer 6

Я знаю, что это старый пост, но только, чтобы добавить свой вход о том, редактор с открытым и фокус не работает. То, что я обнаружил, что работал для меня это:

tinyMCE.activeEditor.focus(); 

я должен был установить это в случае window.setTimeout из-за того, как я использую объекты JS и тому подобное. Надеюсь это поможет.

Answer 7

Похоже, для TinyMCE 4 некоторые из этих решений больше не работают.

// Не похоже, чтобы работать на TinyMCE 4

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

// Не работает

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

tinyMCE.activeEditor.focus(); 

Что работает для меня

// Прекрасно работает в Chrome, но совсем не в Firefox

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

// Добавить это так 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();

Вышеприведенные работает в Firefox, Chrome и IE, а также. Я не тестировал в других браузерах.

Answer 9

Я получил его на работу с TinyMCE 4.x, используя следующие:

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

Answer 10

Я использую следующую функцию, чтобы сфокусировать редактор с thinyMCE Это с помощью JQuery, но будет легко удалить это и использовать document.querySelectorAll(). Используйте babel, если вам это нужно в 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(); 
    } 
} 

Редактор Контейнер - это любой элемент, окружающий текстовое поле tinyMCE. DIV с идентификатором «текст-контейнер» можно назвать focusEditor($('#text-container')) или в React focusEditor(React.findDOMNode(this))

Answer 11

автофокусировку в TinyMCE документации первый пример говорит, что - https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

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

Это работает для меня в TinyMCE Версия4.7.6

Answer 12

Это работает для меня (TinyMCE версия 4.7.6):

tinymce.activeEditor.fire("focus")