如何在 JavaScript Ace 编辑器中标记行号？

Question

如何在 JavaScript Ace 编辑器中标记行号？

javascriptwebeditorbreakpointsace-editor

5

如下截图所示：

Ace编辑器左侧有一个“gutter”，其中包含行号。我想检测此gutter上的单击事件，并插入断点标记，如来自Chrome开发工具的以下屏幕截图所示。

我已经查看了Ace编辑器API，但无法找出如何实现它，请问有谁能告诉我最好的方法？

谢谢。

- horseyguy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- a user · Accepted Answer

看一下这个帖子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()，它并不像文档所示返回一个行号数组，而是返回一个与行号对应的索引数组。