[英]How to add, remove and change glyphs in Monaco Editor
I am able to add glyph to the editor but I am not able to remove and edit the glyph.我可以将字形添加到编辑器,但我无法删除和编辑字形。 Can you please give me the right way of doing it.
你能给我正确的方法吗?
<h2>Monaco Editor Sample</h2>
<div id="container" style="width:80%;height:600px;border:1px solid grey"></div>
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
var editor,decorations;
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}',
].join('\n'),
language: 'javascript',
theme: "myCustomTheme",
automaticLayout: true,
readOnly: false,
mouseWheelZoom:true,
glyphMargin:true,
fontSize:'20px'
});
//below is the glyph I am calling
var decorations = editor.deltaDecorations([], [
{
range: new monaco.Range(3,1,3,1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'glyph-error',
}
}
]);
});
</script>
I am trying to delete or modify the range and style of the glyph using decorations variable but it is a string object.我正在尝试使用装饰变量删除或修改字形的范围和样式,但它是一个字符串 object。
This is the how my editor looks with a squared glyph:这是我的编辑器使用方形字形的外观:
The return value of deltaDecorations
is an array of strings. deltaDecorations
的返回值是一个字符串数组。 Each string is an identifier of a decoration that was created by the last deltaDecorations
call.每个字符串都是由最后一次
deltaDecorations
调用创建的装饰的标识符。
To modify an existing decoration you must replace it with a new one as shown below.要修改现有装饰,您必须将其替换为新装饰,如下所示。
var decorations = editor.deltaDecorations([], [
{
range: new monaco.Range(3,1,3,1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'glyph-error',
}
}
]);
// Now move the previously created decoration to line 2
var targetId = decorations[0];
editor.deltaDecorations([targetId], [
{
range: new monaco.Range(2,1,2,1),
options: {
isWholeLine: true,
className: 'myContentClass',
glyphMarginClassName: 'glyph-error',
}
}
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.