CODEWITHSUNDEEP
javascriptjqueryjquery-uiace-editor
Ameet
Ameet

Reputation: 421

How to set focus on the ace editor?

I am using the ace editor component from ajax.org inside a jquery tab interface. Each tab will contain a separate ace editor. Whenever I switch to a new tab, the editor in it won't get the focus.

I can detect when a tab is selected by binding to the "tabsshow" event of jquery UI. Does any one know how to set focus to the editor in it if say the id of my editor div is editor-tab-0 for the first tab, and so on...?

Please can some one help?

Upvotes: 42

Views: 22527

Answers (5)

Julian
Julian

Reputation: 36720

To focus to the end:

editor.focus();
editor.navigateFileEnd();

Thanks to @a-user

Upvotes: 24

SavoryBytes
SavoryBytes

Reputation: 36236

Nice solution, but I wanted to go to the end of the last line not the beginning of the last line.

//To focus the ace editor
editor.focus();
session = editor.getSession();
//Get the number of lines
count = session.getLength();
//Go to end of the last line
editor.gotoLine(count, session.getLine(count-1).length);

Upvotes: 12

rockvilla
rockvilla

Reputation: 651

editor.focus(); //To focus the ace editor
var n = editor.getSession().getValue().split("\n").length; // To count total no. of lines
editor.gotoLine(n); //Go to end of document

Upvotes: 39

sparkyspider
sparkyspider

Reputation: 13519

I use JQuery with the Ace Editor, and I found the following code worked really nicely for me. PS: My Code Editor Window is in an Iframe:

$('#modelFrame').mouseover(function() {
    try {
        $(this).get(0).contentWindow.editor.focus();
    } catch (doNothing) {
        ;;
    }
});

Upvotes: 0

Paul Beusterien
Paul Beusterien

Reputation: 29572

Here's an excerpt from my code that sets the focus on an Ace edit session in a jQuery UI tab:

    $('#tabs_div').tabs(
        {
            select : function(event, ui) {
                        var tabName = ui.panel.id;
                        var doc = docs.get(tabName);  // look up the EditSession
                        var session = env.split.setSession(doc);
                        session.name = tabName;
                        env.editor.focus();
            }

Upvotes: 4

Related Questions