如何在摩纳哥编辑器中添加，删除和更改字形

Question

我可以将字形添加到编辑器中，但是我不能删除和edit字形。您能给我正确的方法吗？

<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>

我正在尝试使用decorations变量删除或修改字形的范围和样式，但它是一个字符串对象。

This is the how my editor looks line with a squared glyph

Answer 1

deltaDecorations的返回值是一个字符串数组。每个字符串都是最后一次deltaDecorations调用创建的装饰的标识符。

要修改现有装饰，您必须用新的装饰替换，如下所示。

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',
        }
    }
]);