如何在javascript ace编辑器中标记行号? [英] How to mark line numbers in javascript ace editor?
问题描述
如以下屏幕快照所示:
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屋!