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

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

呈现生成的html

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

Ace编辑器中的多个游标

1 个答案: