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

【问题标题】：How to mark line numbers in javascript ace editor?如何在 javascript ace 编辑器中标记行号？
【发布时间】：2013-05-31 19:10:40
【问题描述】：

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

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

我查看了 Ace 编辑器 API，但不知道该怎么做，有人能告诉我最好的方法吗？

谢谢

【问题讨论】：

标签： javascript web editor breakpoints ace-editor

【解决方案1】：

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

你可以使用这个功能

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

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

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

.ace_gutter-cell.ace_breakpoint{
    边框半径：20px 0px 0px 20px；
    box-shadow: 0px 0px 1px 1px 红色插图；
}

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

...

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

【讨论】：

if (target.className.indexOf("ace_gutter-cell") == -1);最后的分号会破坏代码。仅供参考。