ace编辑器如何设置焦点？

Posted 2023-05-07

【中文标题】ace编辑器如何设置焦点？

【英文标题】：How to set focus on the ace editor?

【发布时间】：2011-10-26 10:15:56

【问题描述】：

我在 jquery 选项卡界面中使用来自 ajax.org 的 ace 编辑器组件。 每个选项卡都将包含一个单独的 ace 编辑器。每当我切换到新标签时，其中的编辑器都不会获得焦点。

我可以通过绑定到 jquery UI 的“tabsshow”事件来检测何时选择了一个选项卡。如果说我的编辑器 div 的 id 是 editor-tab-0，有谁知道如何将焦点设置在其中的编辑器上 对于第一个选项卡，依此类推...？

请有人帮忙吗？

【问题讨论】：

你看过“Ace Kitchen Sink”吗？ ace.ajax.org/build/kitchen-sink.html 编辑器窗口的组件层次结构是：div#editor div.ace_editor div.ace_sb。这应该是应该获得焦点的组件。

【参考方案1】：

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

【讨论】：

缺失部分：<div id="aceEditor">var editor = ace.edit("aceEditor");

有帮助，但如果您想将光标移动到最后一行的末尾而不是最后一行的开头，则应该是 editor.gotoLine(n, Infinity);。

【参考方案2】：

聚焦到最后：

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

感谢@a-user

【参考方案3】：

不错的解决方案，但我想转到最后一行的末尾而不是最后一行的开头。

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

【参考方案4】：

这是我的代码的摘录，它将焦点设置在 jQuery UI 选项卡中的 Ace 编辑会话上：

    $('#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();
            

【讨论】：

如果您解释了select 函数中的那些变量是什么，我想给答案 +1，因为按原样粘贴 sn-p 不起作用。

@Rajish 上下文是一个 jQuery UI 选项卡 - 请参阅 jqueryui.com/demos/tabs。 env 变量在 Ace 厨房水槽示例中设置。

【参考方案5】：

我将 JQuery 与 Ace 编辑器一起使用，我发现以下代码对我来说非常有效。 PS：我的代码编辑器窗口在 iframe 中：

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