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

Question

正如您在以下屏幕截图中看到的：

王牌编辑在左侧有一个“排水沟”，其中包含行号。 我想检测一下这个装订线上的一个点击并为断点插入一个标记，如下面的chrome dev工具截图

我看过Ace编辑器API，但无法弄清楚如何做到这一点，有人能告诉我最好的方法吗？

谢谢

Answer 1

请参阅此主题https://groups.google.com/d/msg/ace-discuss/sfGv4tRWZdY/ca1LuolbLnAJ

你可以使用这个功能

  editor.on（“guttermousedown”，function（e）{\n     var target = e.domEvent.target; \n     if（target.className.indexOf（“ace_gutter-cell”）== -1）\n         返回; \n     if（！editor.isFocused（）） \n         返回; \n     if（e.clientX> 25 + target.getBoundingClientRect（）。left） \n         返回; \n\n     var row = e.getDocumentPosition（）。row;\n     e.editor.session.setBreakpoint（行）;\n     e.stop（）;\n }） 

并且不要忘记为断点添加一些样式，例如

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

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

...

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()的奇怪用法，它不会返回文档建议的行号数组，而是一个索引对应于行号的数组。