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

时间:2013-05-31 19:10:41

标签: javascript web editor breakpoints ace-editor

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

screenshot

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

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

由于

1 个答案:

答案 0 :(得分:9)

请参阅此帖子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()的奇怪用法,它不会返回文档建议的行号数组,而是一个索引与行号对应的数组。