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

Question

如您在以下屏幕截图中所见:

Ace 编辑器在左侧有一个“装订线”，其中包含行号。我想检测点击此装订线并为断点插入标记，如以下来自 chrome 开发工具的屏幕截图

我看过 Ace 编辑器 API，但不知道如何操作，有人可以告诉我最好的方法吗？

谢谢

Answer 1

查看此线程 https://groups.google.com/d/msg/ace-discuss/sfGv4tRWZdY/ca1LuolbLnAJ

you can use this function

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();})

and don't forget to add some styling for breakpoints e.g.

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