Question

我在页面上使用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 id="description" ... ></textarea>

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

Answer 2

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

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或被替换的<div>元素。

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('Description').getBody().focus();

上述内容适用于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＆＃39; text-container＆＃39;的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);
});

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

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

13 个答案: