你如何设置TinyMCE textarea元素的焦点？

我在页面上使用TinyMCE作为textarea，但它在其他元素的Tab键顺序中表现不佳。

当我跳出第一个元素时，我可以使用以下代码捕获：

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

如何将焦点设置为TinyMCE编辑器？

Answer 1

终于找到了答案…使用命令：

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

为了我的目的，’id_of_texterea’是“描述”，即

在我的textarea之前的表单元素中，我将上面的execCommand添加到元素的“onblur”操作中。

Answer 2

我知道这是一篇旧post，但只是添加了关于让编辑器打开并且无法正常工作的输入。 我发现对我有用的是：

 tinyMCE.activeEditor.focus(); 

我必须在window.setTimeout事件中设置它，因为我使用JS对象等。 希望这可以帮助。

Answer 3

聚焦也是这样的：

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

看看tabfocus插件，它正是你想要的：

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

Answer 4

如果你正在使用jQuery的tinymce。 以下将有效

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

您只能在编辑器初始化之后执行此操作，因此您可能需要等待其中一个初始化事件。

Answer 5

实际工作原理是在configfile （或jquery文件）中设置一个选项。此选项使您可以自动聚焦编辑器实例。 此选项的值应为编辑器实例ID。 编辑器实例id是原始textarea或被替换的

元素的id 。

auto_focus选项的使用示例：

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

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

Answer 7

  。tinyMCE.get（ '描述'）getBody（）聚焦（）; 

以上工作也适用于Firefox，Chrome和IE。 我没有在其他浏览器中测试过。

Answer 8

这应该将焦点转移到TinyMCE textarea：

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

Answer 9

对于自动对焦，文档第一个例子说 – https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

 tinymce.init({ selector: '#textarea_id', auto_focus: '#textarea_id' }); 

这在TinyMCE版本 4.7.6适用于我

Answer 10

我通过使用以下方法使用TinyMCE 4.x：

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

Answer 11

我使用以下函数将编辑器与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为’text-container’的div，你可以调用focusEditor($('#text-container'))或者在React focusEditor(React.findDOMNode(this))

Answer 12

这适用于我（TinyMCE版本4.7.6）：

 tinymce.activeEditor.fire("focus") 

Answer 13

TinyMCE 4.7.4

以上都没有为我工作，订阅TinyMCEs init事件确实有效：

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

注意：如果您打开浏览器开发人员工具，则关注元素并不总是有效。 您可能会将焦点从页面上移开，因为浏览器只能有一个焦点。 例如，如果您打开了开发人员工具，此解决方案就不起作用。