How to set focus on the ace editor?

Question

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?

Do you had a look at the "Ace Kitchen Sink"? http://ace.ajax.org/build/kitchen-sink.html There the hierarchy of components to the editor window is: `div#editor div.ace_editor div.ace_sb`. This should be the component that should get the focus. — mliebelt, Aug 13 '11 at 15:39

score 38 · Answer 1 · answered Mar 22 '12 at 08:34

38

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

answered Mar 22 '12 at 08:34

rockvilla

641
8
15

1

Missing pieces: `
` `var editor = ace.edit("aceEditor");`
– Luke Jan 03 '17 at 21:03
helpful, but should be `editor.gotoLine(n, Infinity);` if you want to move the cursor to the end of the last line instead of the start of the last line. – I wrestled a bear once. Jun 07 '21 at 18:19

Julian · Answer 2 · 2018-02-10T22:25:38.267

23

To focus to the end:

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

Thanks to @a-user

edited Feb 10 '18 at 22:25

answered May 29 '17 at 12:39

Julian

33,915
22
119
174

SavoryBytes · Answer 3 · 2013-03-13T01:34:23.363

12

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

edited Mar 13 '13 at 01:34

answered Mar 12 '13 at 23:33

SavoryBytes

35,571
4
52
61

score 4 · Answer 4 · answered Aug 15 '11 at 16:47

4

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

answered Aug 15 '11 at 16:47

Paul Beusterien

27,542
6
83
139

1

I'd like to give +1 for the answer if you explained what are those variables in the `select` function, because pasting the snippet as is doesn't work. – Rajish Nov 01 '11 at 23:51
@Rajish The context is a jQuery UI Tab - see http://jqueryui.com/demos/tabs/. The env variable is set up in the Ace kitchen sink example. – Paul Beusterien Nov 01 '11 at 23:56

score 0 · Answer 5 · answered Aug 22 '11 at 09:12

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

How to set focus on the ace editor?

5 Answers5

Linked