如何設置TinyMCE textarea元素的焦點？

我在頁面上使用TinyMCE作爲textarea，但在其他元素的Tab鍵順序中播放效果不佳。如何設置TinyMCE textarea元素的焦點？

我可以使用下面的代碼來捕捉，當我走出標籤的第一要素：

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

我怎樣才能將焦點設置到TinyMCE的編輯器？

來源

2010-02-06 Failpunk

終於找到了答案命令：

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

對於我而言， 'id_of_texterea' 是「說明」，即

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

在我的textarea之前的表單元素中，我將上面的execCommand添加到了eleme nt的「onblur」動作。

來源

2010-04-22 15:16:32 jbnunn

爲了更逼真的方法，您可以將該execCommand綁定到前一個表單元素上的tab鍵。 – jbnunn 2010-04-22 15:18:03

感謝您的指導！我有這個煩惱！ – 2011-03-19 05:39:46

這應該通過重點TinyMCE的textarea的：

$("#id_of_tinyMCE_area").focus();

來源

2010-02-06 21:12:13

TinyMCE的背景似乎有很多，這是行不通的。 – Failpunk 2010-02-08 09:03:46

也注重工作原理是這樣：

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

退房的tabfocus插件，這是做的正是你想要什麼：

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

來源

2011-01-06 10:50:18 zzz

爲我工作.. 10+ – 2014-08-23 02:34:19

如果您使用TinyMCE的與jQuery。下面的工作

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

你只能這樣做編輯，雖然已經初始化之後，所以你可能需要等待其初始化事件之一。

來源

2011-04-06 00:54:33 robyates

實際工作的是在configfile（或jquery文件）中設置一個選項使用此選項可以自動聚焦編輯器實例。這個選項的值應該是一個編輯器實例ID。編輯器實例ID是原始textarea的id或被替換的<div>元素。

的auto_focus選項的使用示例：

tinyMCE.init({ 
    //... 
    auto_focus : "elm1" 
});

來源

2012-02-29 14:05:31

工作很好。我在代碼中添加了一個條件，用於檢查textarea字段上是否存在「autofocus」屬性。如果爲true，則auto_focus設置爲textarea id，否則，auto_focus設置爲false。 – 2014-05-13 13:43:39

我知道這是一個古老的職位，但我想補充我的投入大約爲編輯器中打開和重點不工作。我發現，工作對我來說是這樣的：

tinyMCE.activeEditor.focus();

我必須設置這是因爲我是如何使用JS對象和這樣的window.setTimeout事件。希望這可以幫助。

來源

2012-08-02 15:18:19 David

這對我很好用： setTimeout（「try {tinymce.activeEditor.focus（）} catch（e）{}」，2000）; – 2013-10-18 01:47:43

工作對我來說:-)得到我的upvote – gchq 2014-12-08 14:06:09

看起來像TinyMCE 4這些解決方案中的一些不再有效。

//似乎沒有上是否工作正常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" 
});

//添加這個所以火狐也適用

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

來源

2013-11-27 00:11:24 VGruenhagen

Im與tinymce 4.x工作，這一個爲我工作： tinymce.execCommand（'mceFocus'，false，'id_of_textarea'）; 我開始這個命令AFTER全部被初始化並且編輯器在屏幕上可見。 – Jonny 2016-10-02 22:39:26

tinyMCE.get('Description').getBody().focus();

上述工程中Firefox，鉻和IE爲好。我沒有在其他瀏覽器中測試過。

來源

2014-04-16 06:26:05

不知道爲什麼，但接受的答案不適合我，而這一個。 – Marcus 2014-09-05 17:14:58

謝謝@馬庫斯！ – 2014-10-26 09:28:17

這是一個工作 – 2016-08-30 08:35:36

我得到了它的使用與TinyMCE的4.x的工作如下：

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

來源

2016-05-12 16:02:19 SieGeL

我用下面的功能集中與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 textarea的任何元素，例如， ID爲「文本的容器」一個div你可以調用focusEditor($('#text-container'))或陣營focusEditor(React.findDOMNode(this))

來源

2016-07-28 06:04:43

自動對焦在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

來源

2018-02-05 10:06:55

這對我的作品（TinyMCE的版本4.7.6）：

tinymce.activeEditor.fire("focus")

來源

2018-02-19 13:15:46

如何設置TinyMCE textarea元素的焦點？

回答

相關問題