When click on edit button it displays tinymce text editor but the problem is it does not set focus on first load of editor from second onward it work fine

Below is what i have tried

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

When click on edit button it displays tinymce text editor but the problem is it does not set focus on first load of editor from second onward it work fine

Below is what i have tried

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

• for me first time it will occur,but for the other times,it won't work :( – Vaisakh Parannattil Cherul Commented Aug 28, 2014 at 9:40

4 Answers 4

Maybe the mceFocus mand is removed in TinyMce 4 (I said this, because in 4.x removed mceRemoveControl and mceAddControl removed).

So, I remend to use the .focus()

try this :

tinyMCE.get(editorid).focus();

Working Example

OR you can use the auto_focus property.

auto_focus: This option enables you to auto focus an editor instance.

Note: auto_focus set focus on editor when it's load

Try this code may work for you

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

for tinyMCE v4+

tinymce.activeEditor.focus();

Just in case you are looking for a solution for the VUE thin plugin @tinymce/tinymce-vue

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

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