javascript - Set focus onload of TinyMce editor - Stack Overflow

admin管理员组

文章数量:1308100

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

Share Improve this question Follow asked May 23, 2014 at 7:25 Nilesh GajareNilesh Gajare 6,39833 gold badges4444 silver badges7373 bronze badges 1

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

本文标签： javascriptSet focus onload of TinyMce editorStack Overflow