Ace编辑器中的多个光标

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更多的细节要添加一个选择光标，或假的光标显示其他用户的位置