1

所以我想使用 monaco 来显示代码和一些基于内联的更改，因此我想在更改的元素周围添加 span 标签并使其可点击等。

当您创建一些 Ranges 并给它们一个类时会发生这种情况：

var decorations = editor.deltaDecorations([], [
    { range: new monaco.Range(7,7,7,17), options: { inlineClassName: 'UPDATE' }},
    { range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'INSERT' }}
]);

JSFiddle：https ://jsfiddle.net/wedenigc/d2thbo0a/2/

如您所见，这将我的跨度分开，当您将鼠标悬停在它们上方时尤其明显。因此，我不想向所有子元素添加一个类，而是想在我的范围的开头添加一个开始标签和一个结束标签。HTML 的不同之处在于：

<!-- previous code -->
<span><span class="mtk1 INSERT">Person</span><span class="mtk1 UPDATE INSERT">.prototype</span><span class="mtk1 INSERT">.getAge</span>

<!-- new html -->
<span><span class="mtk1 INSERT">Person<span class="mtk1 UPDATE">.prototype</span>.getAge</span>


html, body, #container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 20px;
	overflow: hidden;
}

.INSERT {
	border: black 1px solid;
    background-color: greenyellow;
    padding: 2px;
}

.UPDATE {
	border: black 1px solid;
    background-color: yellow;
    padding: 2px;
}

.UPDATE:hover {
    padding: 3px;
}

.INSERT:hover {
    padding: 3px;
}
<span><span class="mtk1 INSERT">Person</span><span class="mtk1 UPDATE INSERT">.prototype</span><span class="mtk1 INSERT">.getAge</span>

<span><span class="mtk1 INSERT">Person<span class="mtk1 UPDATE">.prototype</span>.getAge</span>

可以通过使用className而不是修复此行为，inlineClassName但随后悬停停止工作。

更新的 JSFiddle：https ://jsfiddle.net/wedenigc/d2thbo0a/3/

4

0 回答 0