当我将鼠标放在ace编辑器上时,我想在代码的下划线,甚至更多,以将鼠标光标显示为指针。
我试图这样做:
editSession.addMarker(new Range(loc.start.line - 1, loc.start.column, loc.end.line - 1, loc.end.column), "ace_underline", "text")
这是行不通的。但是,令我困惑的是,如果我将
ace_underline
(addMarker
函数的第二个参数)替换为ace_highlight-marker
或ace_selection
,它在一定程度上可以使我想要的颜色变色。我还尝试创建自己的CSS类,如下所示:
.myCustomMouseOverHighlight {
text-decoration: underline;
cursor: pointer !important;
}
然后将第二个参数替换为
myCustomMouseOverHighlight
,但同样无济于事。任何指针将不胜感激。
拉杜
最佳答案
它不起作用,因为addMarker在文本后面添加了一个div。尝试
.myCustomMouseOverHighlight {
border-bottom: 1px solid red;
position: absolute;
cursor: pointer !important;
pointer-events: auto;
}
<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
.myCustomMouseOverHighlight {
border-bottom: 1px solid red;
position: absolute;
cursor: pointer !important;
pointer-events: auto;
}
</style>
<script>
var Range = ace.Range;
var editor = ace.edit(null, {value: "Hello World"});
editor.container.style.height = "100px";
document.body.appendChild(editor.container);
editor.session.addMarker(new Range(0, 1, 0, 5), "myCustomMouseOverHighlight", "text")
</script>