CODEWITHSUNDEEP
javascriptjqueryhtmltinymcetinymce-4
Nilesh Gajare
Nilesh Gajare

Reputation: 6398

Set focus onload of TinyMce editor

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

Upvotes: 2

Views: 13083

Answers (4)

Pavlushka66
Pavlushka66

Reputation: 91

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()

Upvotes: 0

cenk
cenk

Reputation: 1429

for tinyMCE v4+

tinymce.activeEditor.focus();

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

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

So, I recommend 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

Upvotes: 5

rjdmello
rjdmello

Reputation: 863

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

Upvotes: 0

Related Questions