如何设置 TinyMCE 文本区域元素的焦点？

Question

我将 TinyMCE 用于页面上的文本区域，但它在其他元素的 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>

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

Answer 2

我知道这是一篇旧文章，但只是添加我关于打开编辑器和焦点不起作用的输入。我发现对我有用的是：

tinyMCE.activeEditor.focus();

由于我使用 JS 对象等的方式，我必须在 window.setTimeout 事件中设置它。希望这有帮助。

Answer 3

对焦也可以这样操作：

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

查看 tabfocus 插件，它正在做你想要的事情：

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

Answer 4

tinyMCE.get('描述').getBody().focus();

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

补充：

注意：字符串

Description

是具有 #

 类的 textarea 元素（即用于锚定 TinyMCE 编辑器的 textarea 元素）的 ID 

（不带 tinymce

！）

。

2015 年 10 月 23 日：确认与 TinyMCE 4.1.9 配合使用

Answer 5

如果您将tinymce 与JQuery 结合使用。以下将起作用

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

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

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

实际起作用的是在

configfile

（或 jquery 文件）中设置一个选项，此选项使您能够自动聚焦编辑器实例。该选项的值应该是编辑器实例 ID。编辑器实例 ID 是原始文本区域的

id

或被替换的

<div>

元素。

auto_focus

选项的使用示例：

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

Answer 8

对于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

Answer 9

这应该将焦点传递到 TinyMCE 文本区域：

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

Answer 10

这对我有用（TinyMCE 版本 4.7.6）：

tinymce.activeEditor.fire("focus")

Answer 11

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

注意：如果您打开了浏览器开发人员工具，那么专注于元素并不总是有效。您可能会强制焦点离开页面，因为浏览器只能有一个焦点。 例如，如果您打开了开发人员工具，则此解决方案也不起作用。

Answer 12

我通过使用以下命令使其可以与 TinyMCE 4.x 一起使用：

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

Answer 13

我使用以下功能通过 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))