web - How to mark line numbers in javascript ace editor? - Stack Overflow

admin管理员组

文章数量:1313054

As you can see in the following screenshot:

Ace editors have a 'gutter' on the left-hand side that contains the line numbers. I would like to detect a click on this gutter and insert a marker for a breakpoint, as in the following screenshot from chrome dev tools

I've had a look at the Ace editor API, but can't figure out how to do it, could someone tell me the best way to go about it?

Thanks

As you can see in the following screenshot:

Ace editors have a 'gutter' on the left-hand side that contains the line numbers. I would like to detect a click on this gutter and insert a marker for a breakpoint, as in the following screenshot from chrome dev tools

I've had a look at the Ace editor API, but can't figure out how to do it, could someone tell me the best way to go about it?

Thanks

• javascript
• web
• editor
• breakpoints
• ace-editor

Share Improve this question Follow edited Feb 8, 2017 at 14:41 CommunityBot 111 silver badge asked May 31, 2013 at 19:10 horseyguyhorseyguy 29.9k2020 gold badges109109 silver badges148148 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

See this thread https://groups.google./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; 
}

Breakpoints are often toggled. To achieve this behavior, use

...

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

...

Notice the strange use of EditSession.getBreakpoints(), which doesn't return an array of row numbers as documentation suggests, but rather an array with indices corresponding to the row numbers.

本文标签： webHow to mark line numbers in javascript ace editorStack Overflow