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更多的細節要添加一個選擇光標，或假的光標顯示其他用戶的位置