Ace Editor 中的多个光标

Question

是否有任何选项可以向我的 Ace 编辑器添加另一个光标？ 类似var cur = new Cursor();

我已经尝试搜索 Ace 文档好几个小时了，但很遗憾我找不到答案。

Answer 1

您可以使用addDynamicMarker 显示多个光标

var marker = {}
marker.cursors = [{row: 0, column: 10}]
marker.update = function(html, markerLayer, session, config) {
    var start = config.firstRow, end = config.lastRow;
    var cursors = this.cursors
    for (var i = 0; i < cursors.length; i++) {
        var pos = this.cursors[i];
        if (pos.row < start) {
            continue
        } else if (pos.row > end) {
            break
        } else {
            // compute cursor position on screen
            // this code is based on ace/layer/marker.js
            var screenPos = session.documentToScreenPosition(pos)

            var height = config.lineHeight;
            var width = config.characterWidth;
            var top = markerLayer.$getTop(screenPos.row, config);
            var left = markerLayer.$padding + screenPos.column * width;
            // can add any html here
            html.push(
                "<div class='MyCursorClass' style='",
                "height:", height, "px;",
                "top:", top, "px;",
                "left:", left, "px; width:", width, "px'></div>"
            );
        }
    }
}
marker.redraw = function() {
   this.session._signal("changeFrontMarker");
}
marker.addCursor = function() {
    // add to this cursors
    ....
    // trigger redraw
    marker.redraw()
}
marker.session = editor.session;
marker.session.addDynamicMarker(marker, true)
// call marker.session.removeMarker(marker.id) to remove it
// call marker.redraw after changing one of cursors

并添加一些像这样的 css

.MyCursorClass {
    position: absolute;
    border-left: 2px solid gold;
}

使用 addDynamicMarker 的例子见https://github.com/ajaxorg/ace/blob/master/lib/ace/search_highlight.js

这里的主要代码是update方法，每次ace渲染时都会调用。它获取名为html 的字符串数组，并且可以向其中添加任何html。标记层通过 .innerHTML = html.join("")

渲染生成的 html

查看https://github.com/ajaxorg/ace/blob/master/lib/ace/layer/marker.js了解更多详情