web-dev-qa-db-ja.com

TinyMCE textarea要素のフォーカスをどのように設定しますか？

ページのテキストエリアにTinyMCEを使用していますが、他の要素のタブ順でニースを再生しません。

次のコードを使用して、最初の要素からタブで移動したときにキャプチャできます。

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

どうすればフォーカスをTinyMCEエディターに設定できますか？

jqueryfocustinymce
30
Justin

最後に答えが見つかりました...コマンドを使用してください：

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

私の目的では、「id_of_texterea」は「説明」、つまり

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

Textareaの前のフォーム要素で、要素の "onblur"アクションに上記のexecCommandを追加しました。

41
jbnunn

私はこれが古い投稿であることを知っていますが、エディターを開いてフォーカスを機能させないようにするための私の入力を追加するだけです。私にとってうまくいったのはこれです：

tinyMCE.activeEditor.focus();

JSオブジェクトなどを使用していたため、window.setTimeoutイベントでこれを設定する必要がありました。お役に立てれば。

23
David

フォーカシングも次のように機能します。

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

Tabfocusプラグインをチェックしてください。これはまさにあなたが望んでいることです。

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

13
zzz

JQueryでtinymceを使用している場合。以下は動作します

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

ただし、これはエディターが初期化された後にのみ実行できるため、初期化イベントの1つで待機する必要がある場合があります。

9
robyates

実際に機能するのは、configfile（またはjqueryファイル）にオプションを設定することです。このオプションを使用すると、エディターインスタンスに自動フォーカスできます。このオプションの値は、エディターインスタンスIDである必要があります。エディターインスタンスIDは、元のtextareaのidまたは置き換えられた<div>要素です。

auto_focusオプションの使用例：

tinyMCE.init({
    //...
    auto_focus : "Elm1"
});
7
Erwin Odendaal
tinyMCE.get（ 'Description'）。getBody（）。focus（）;

上記はFirefoxで機能し、ChromeおよびIEと同様です。他のブラウザではテストしていません。

6
Pranab Gupta

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);
}
6
VGruenhagen

これにより、TinyMCEテキストエリアにフォーカスが渡されます。

$("#id_of_tinyMCE_area").focus();
2
Mike Trpcic

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
Maniruzzaman Akash

以下の関数を使用して、thinyMCEでエディターにフォーカスします。これはjQueryを使用していますが、これを取り除いてdocument.querySelectorAll()を使用するのは簡単です。 es5でこれが必要な場合は babel を使用します。

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

EditorContainerは、tinyMCEテキストエリアを囲む任意の要素です。 id 'text-container'のdivはfocusEditor($('#text-container'))またはReact focusEditor(React.findDOMNode(this))で呼び出すことができます

0
svnm

以下を使用してTinyMCE 4.xで動作させることができます。

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

0
SieGeL

これは私にとってはうまくいきます（TinyMCEバージョン4.7.6）：

tinymce.activeEditor.fire("focus")
0
Serhii Maksymchuk