Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

Ответ 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))