如何在javascript ace编辑器中标记行号？

Question

正如你可以在下面的截图中看到：

王牌编辑对包含该行号的左侧一个“阴沟”。我想检测点击这个阴沟并插入一个断点的标记，如下面的从铬开发工具截图

我已经看了一下Ace编辑器的API，但无法弄清楚如何做到这一点，有人可以告诉我最好的办法吗？

感谢

Answer 1

看到这个线程https://groups.google.com/d/msg/ace-discuss/sfGv4tRWZdY/ca1LuolbLnAJ

您可以使用此功能

editor.on("guttermousedown", function(e) { 
    var target = e.domEvent.target; 
    if (target.className.indexOf("ace_gutter-cell") == -1) 
     return; 
    if (!editor.isFocused()) 
     return; 
    if (e.clientX > 25 + target.getBoundingClientRect().left) 
     return; 

    var row = e.getDocumentPosition().row; 
    e.editor.session.setBreakpoint(row); 
    e.stop(); 
})

，不要忘记添加一些造型断点例如

.ace_gutter-cell.ace_breakpoint{ 
    border-radius: 20px 0px 0px 20px; 
    box-shadow: 0px 0px 1px 1px red inset; 
}

断点常常切换。要实现此行为，使用

... 

var breakpoints = e.editor.session.getBreakpoints(row, 0); 
var row = e.getDocumentPosition().row; 
if(typeof breakpoints[row] === typeof undefined) 
    e.editor.session.setBreakpoint(row); 
else 
    e.editor.session.clearBreakpoint(row); 

... 

通知怪使用EditSession.getBreakpoints()，如文档建议不返回行号的数组，而是对应于行号索引。