将焦点设置在TinyMce编辑器的加载上

Question

当单击编辑按钮时，它会显示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); 
}

Answer 1

也许

mceFocus

命令已在

TinyMce 4

中删除（我这么说是因为在 4.x 中删除了

mceRemoveControl

和

mceAddControl

）。

所以，我建议使用

.focus()

试试这个：

tinyMCE.get(editorid).focus();

工作示例

或者您可以使用

auto_focus

属性。

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

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

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

Answer 3

适用于tinyMCE v4+

tinymce.activeEditor.focus();

Answer 4

以防万一您正在寻找 VUE 瘦插件的解决方案

@tinymce/tinymce-vue

import { getTinymce } from '@tinymce/tinymce-vue/lib/es2015/main/ts/TinyMCE'

const tinyMCE = getTinymce()
tinyMCE.activeEditor.focus()