Как установить фокус элемента textarea TinyMCE? - PullRequest
Новая
       26

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

24 голосов
/ 06 февраля 2010

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

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

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

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

Ответы [ 13 ]

41 голосов
/ 22 апреля 2010

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

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

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

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

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

21 голосов
/ 02 августа 2012

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

tinyMCE.activeEditor.focus();

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

12 голосов
/ 06 января 2011

Фокусировка также работает так: 

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

Проверьте плагин tabfocus, который делает именно то, что вы хотите:

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

9 голосов
/ 06 апреля 2011

Если вы используете tinymce с JQuery. Следующее будет работать 

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

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

7 голосов
/ 29 февраля 2012

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

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

tinyMCE.init({
    //...
    auto_focus : "elm1"
});
6 голосов
/ 27 ноября 2013

Похоже на 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);
}
5 голосов
/ 16 апреля 2014 
tinyMCE.get('Description').getBody().focus();

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

2 голосов
/ 05 февраля 2018

Для Auto focus in 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

2 голосов
/ 07 февраля 2010

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

$("#id_of_tinyMCE_area").focus();
0 голосов
/ 29 мая 2018

TinyMCE 4.7.4

Ничто из вышеперечисленного не помогло мне, подписка на событие init TinyMCEs сработала: 

const elTinyMce = tinyMCE.get('your_textarea_id');
// (optional) This is not necessary.
// I do this because I may have multiple tinymce elements on my page
tinyMCE.setActive(elTinyMce);
elTinyMce.on('init', function () {
    // Set the focus
    elTinyMce.focus();
    // (optional) Select the content
    elTinyMce.selection.select(
        elTinyMce.getBody(),
        true
    );
    // (optional) Collapse the selection to start or end of range
    elTinyMce.selection.collapse(false);
});

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

Страница:
...