如何将选择集中在Ace Editor中

时间:2013-09-27 10:52:06

标签: javascript cursor ace-editor

我正在努力使得当光标或选区(一个或两个)在ace编辑器会话中向左移动时,滚动条会滚动以将光标或选定区域保持在中心位置textarea。

有一个名为centerSelection()的函数

this.centerSelection = function() {
    var range = this.getSelectionRange();
    var pos = {
        row: Math.floor(range.start.row + (range.end.row - range.start.row) / 2),
        column: Math.floor(range.start.column + (range.end.column - range.start.column) / 2)
    }
    this.renderer.alignCursor(pos, 0.5); };

“尝试将当前选择置于屏幕中心。”

这听起来像我想要的但似乎没有做任何事情。

还有一个名为“centerselection”的命令的键绑定

{
name: "centerselection",
bindKey: bindKey(null, "Ctrl-L"),
exec: function(editor) { editor.centerSelection(); },
readOnly: true}

但它没有Windows的Key输入,只是说null。我没有mac,所以我无法尝试Ctrl-L,我很好奇为什么它没有Windows的键输入。

在玩了之后我意识到它正在工作它只是选择行而不是选择列的中心。那么有没有办法让选择位于中心列和中心行? 我认为这是因为alignCursor函数只对齐光标行而不是列

this.alignCursor = function(cursor, alignment) {
    if (typeof cursor == "number")
        cursor = {row: cursor, column: 0};

    var pos = this.$cursorLayer.getPixelPosition(cursor);
    var h = this.$size.scrollerHeight - this.lineHeight;
    var offset = pos.top - h * (alignment || 0);

    this.session.setScrollTop(offset);
    return offset;
};

1 个答案:

答案 0 :(得分:2)

嗯,我想我弄清楚了,下面这段代码运行正常。 :)

var cursorLeft = editor.renderer.$cursorLayer.getPixelPosition(0).left;
//gets distance between cursor and left side of textarea in pixels
var scrollerWidth = editor.renderer.$size.scrollerWidth;
//gets the width of the text area (that can be seen)
editor.renderer.scrollToX(cursorLeft - scrollerWidth/2);
//moves the scroller so that the left side i at the same point as the cursor minus half the width of the area that can be seen