ページのテキストエリアにTinyMCEを使用していますが、他の要素のタブ順でニースを再生しません。
次のコードを使用して、最初の要素からタブで移動したときにキャプチャできます。
$('#title').live('keypress', function (e) {
if(e.keyCode == 9) {
alert('tabbed out');
}
});
どうすればフォーカスをTinyMCEエディターに設定できますか?
最後に答えが見つかりました...コマンドを使用してください:
tinymce.execCommand('mceFocus',false,'id_of_textarea');
私の目的では、「id_of_texterea」は「説明」、つまり
<textarea id="description" ... ></textarea>
Textareaの前のフォーム要素で、要素の "onblur"アクションに上記のexecCommandを追加しました。
私はこれが古い投稿であることを知っていますが、エディターを開いてフォーカスを機能させないようにするための私の入力を追加するだけです。私にとってうまくいったのはこれです:
tinyMCE.activeEditor.focus();
JSオブジェクトなどを使用していたため、window.setTimeoutイベントでこれを設定する必要がありました。お役に立てれば。
フォーカシングも次のように機能します。
tinyMCE.get('id_of_textarea').focus()
Tabfocusプラグインをチェックしてください。これはまさにあなたが望んでいることです。
JQueryでtinymceを使用している場合。以下は動作します
$("#id_of_textarea").tinymce().focus();
ただし、これはエディターが初期化された後にのみ実行できるため、初期化イベントの1つで待機する必要がある場合があります。
実際に機能するのは、configfile
(またはjqueryファイル)にオプションを設定することです。このオプションを使用すると、エディターインスタンスに自動フォーカスできます。このオプションの値は、エディターインスタンスIDである必要があります。エディターインスタンスIDは、元のtextareaのid
または置き換えられた<div>
要素です。
auto_focus
オプションの使用例:
tinyMCE.init({
//...
auto_focus : "Elm1"
});
tinyMCE.get( 'Description')。getBody()。focus();
上記はFirefoxで機能し、ChromeおよびIEと同様です。他のブラウザではテストしていません。
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);
}
これにより、TinyMCEテキストエリアにフォーカスが渡されます。
$("#id_of_tinyMCE_area").focus();
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
以下の関数を使用して、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))
で呼び出すことができます
以下を使用してTinyMCE 4.xで動作させることができます。
tinymce.EditorManager.get('id_of_editor_instance').focus();
これは私にとってはうまくいきます(TinyMCEバージョン4.7.6):
tinymce.activeEditor.fire("focus")