我正在尝试使用标记部分突出显示一条线。
根据documentation on ranges,可以创建一个具有4个输入的输入:startLine, startColumn, endLine, endColumn
我将这样的范围输入到添加标记方法中,但它只是突出显示了整行
我的代码:
var editor = ace.edit("editor");
var Range = ace.require('ace/range').Range;
editor.session.addMarker(
new Range(startLine - 1, startPos, stopLine - 1, stopPos),
"highlightError",
"line",
true
);
我认为我的问题可能与addMarker的第3个参数有关,documentation我设法找到的唯一状态是这应该是“标记的类型”,但我找不到可用的标记类型是。
答案 0 :(得分:1)
我向我保证,“行”的替代选项是“文本”,但是设置此项并不能解决我的问题。我最后几乎没有突出显示的区域。经过进一步的研究,我意识到addMarker()
创建的标记未将其位置设置为绝对。我在我的HighlightError类css中添加了position: absolute;
,它解决了这个问题,现在突出显示了正确的文本。
答案 1 :(得分:1)
由于所选答案不够清晰,因此我在此答案中添加了一个示例。
您需要将position: absolute;
添加到突出显示类中。
例如here,我正在使用.blue
将选择内容变为蓝色,然后我应该向其中添加position: absolute;
。
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
var Range = ace.require("ace/range").Range;
editor.selection.setRange(new Range(4, 0, 6, 5));
editor.session.addMarker(new Range(0, 0, 1, 5), "blue", "text");
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.blue {
position: absolute;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://pagecdn.io/lib/ace/1.4.6/ace.js" integrity="sha256-CVkji/u32aj2TeC+D13f7scFSIfphw2pmu4LaKWMSY8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="editor">
function foo(items) {
var x = items * items;
return x;
}
var test = foo(2);
console.log(test); //should be 4
console.log(foo(1)); //should be 1
console.log(foo(3)); //should be 9
</div>
</body>
</html>
答案 2 :(得分:0)
使用“文本”代替“行”作为第三个参数。
其他受支持的类型是“ fullLine”和“ screenLine” https://github.com/ajaxorg/ace/blob/master/lib/ace/layer/marker.js#L99