设置 TinyMce 编辑器的加载焦点答案

【问题标题】：Set focus onload of TinyMce editor设置 TinyMce 编辑器的加载焦点
【发布时间】：2014-05-23 07:25:08
【问题描述】：

当点击编辑按钮时，它会显示 tinymce 文本编辑器，但问题是它没有将焦点放在从第二次开始的第一次加载编辑器上，它工作正常

以下是我尝试过的

HTML

<h3>History Review <a href="#" class="blue_edit_btn" id="history_review_link" onclick="bgshoweditor('history_review')" >Edit</a></h3>

jQuery

function bgshoweditor(editorid)
{

    $("#"+editorid+"_div").hide();
    $("#"+editorid).show(); 
    tinyMCE.execCommand('mceRemoveControl', false, editorid );
    tinyMCE.execCommand('mceAddControl', true, editorid );
    tinyMCE.execCommand('mceFocus', false, editorid );      
    tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true);
    tinyMCE.activeEditor.selection.collapse(false); 
}

【问题讨论】：

对我来说第一次会发生，但在其他时候，它不会工作:(

标签： javascript jquery html tinymce tinymce-4

【解决方案1】：

可能mceFocus 命令在TinyMce 4 中被删除（我这么说是因为在4.x 中删除了mceRemoveControl 和mceAddControl 被删除）。

所以，我建议使用.focus()

试试这个：

tinyMCE.get(editorid).focus();

Working Example

或者您可以使用auto_focus 属性。

auto_focus：此选项使您能够自动聚焦编辑器实例。

注意：auto_focus 在编辑器加载时将焦点设置在编辑器上

【讨论】：

我知道这是可行的，但在我的页面中有 40 个 tinymce，因此加载需要更多时间。这就是为什么我在运行时加载它，即当用户单击编辑按钮时，它会加载一个微型 mce 编辑器而不是其他编辑器
如果 wp 中的编辑器处于文本模式，这似乎不起作用。所以我假设只有当 tinyMCE 在加载时才起作用，并且仍然是编辑器。 tinyMCE.get(editorid).focus(); 否则会很受欢迎。我像这样测试：var editorState = ( tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() !== false ) ? false : true; 试图设置焦点：` if ( editorState === true ) { tinyMCE.get('content').focus(); } 其他 { $('textarea#content').focus(); }`file_name.js?ver=6dce954…:20 Uncaught TypeError: Cannot read property 'focus' of null

【解决方案2】：

试试这个代码可能对你有用

function bgshoweditor(editorid)
{

$("#"+editorid+"_div").hide();
$("#"+editorid).show(); 
 if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
     tinyMCE.execCommand('mceRemoveControl', false, editorid );
 }
tinyMCE.execCommand('mceAddControl', true, editorid );
tinyMCE.execCommand('mceFocus', false, editorid );      
tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true);
tinyMCE.activeEditor.selection.collapse(false); 
}

【讨论】：

不幸的是，它不适用于我的情况......功能第二次有效，但不是第一次

【解决方案3】：

适用于 tinyMCE v4+

tinymce.activeEditor.focus();

【讨论】：