Как вы устанавливаете фокус элемента textarea TinyMCE?
Я использую TinyMCE для текстового поля на странице, но он не играет хорошо в порядке табуляции других элементов.
Я могу использовать следующий код для захвата, когда я выхожу из первого элемента:
$('#title').live('keypress', function (e) {
if(e.keyCode == 9) {
alert('tabbed out');
}
});
Как настроить фокус на редактор TinyMCE?
Ответы
Ответ 1
Наконец нашел ответ... используйте команду:
tinymce.execCommand('mceFocus',false,'id_of_textarea');
В моих целях "id_of_texterea" было "описанием", то есть
<textarea id="description" ... ></textarea>
В элементе формы, который предшествовал моему текстовому полю, я добавил execCommand выше в действие элемента onblur.
Ответ 2
Я знаю, что это старый пост, но просто добавьте свой вклад в открывание редактора и фокус, который не работает. То, что я нашел для меня, было следующим:
tinyMCE.activeEditor.focus();
Мне пришлось установить это в событие window.setTimeout из-за того, как я использовал объекты JS и т.д. Надеюсь, это поможет.
Ответ 3
Фокусировка также работает следующим образом:
tinyMCE.get('id_of_textarea').focus()
Проверьте плагин tabfocus, который делает именно то, что вы хотите:
http://tinymce.moxiecode.com/tryit/tab_focus.php
Ответ 4
Если вы используете tinymce с JQuery. Следующее будет работать
$("#id_of_textarea").tinymce().focus();
Вы можете сделать это только после инициализации редактора, и поэтому вам может потребоваться дождаться одного из его событий инициализации.
Ответ 5
На самом деле работает настройка параметра configfile
(или файла jquery). Эта опция позволяет вам автоматически сфокусировать экземпляр редактора. Значение этого параметра должно быть идентификатором экземпляра редактора. Идентификатор экземпляра редактора - это id
для исходного элемента textarea или <div>
, который был заменен.
Пример использования опции auto_focus
:
tinyMCE.init({
//...
auto_focus : "elm1"
});
Ответ 6
Похоже, что для 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);
}
Ответ 7
tinyMCE.get('Description').getBody().focus();
Это работает в Firefox, Chrome и IE. Я не тестировал в других браузерах.
Ответ 8
Это должно сфокусироваться на текстовом поле TinyMCE:
$("#id_of_tinyMCE_area").focus();
Ответ 9
Мне нужно работать с TinyMCE 4.x, используя следующее:
tinymce.EditorManager.get('id_of_editor_instance').focus();
Ответ 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();
}
}
РедакторContainer - это любой элемент, окружающий текстовое поле tinyMCE, например. div с id 'text-container', вы можете вызвать focusEditor($('#text-container'))
или в React focusEditor(React.findDOMNode(this))