如何在javascript ace编辑器中标记行号? [英] How to mark line numbers in javascript ace editor?

查看:365
本文介绍了如何在javascript ace编辑器中标记行号?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如以下屏幕快照所示:

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

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

我看过Ace编辑器API,但是可以找不到解决办法,有人可以告诉我最好的解决方法吗?

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?

谢谢

推荐答案

查看此线程 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();
})

,别忘了为断点添加样式,例如

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

...

请注意 EditSession.getBreakpoints(),它不会像文档所建议的那样返回行号数组,而是返回带有与行号相对应的索引的数组。

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.

这篇关于如何在javascript ace编辑器中标记行号?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆