首页 文章

浏览器中的Microsoft Monaco Editor获得了行的 Value

提问于
浏览
3

我一直在使用基于浏览器的Microsoft Monaco Editor版本,我在操场上找不到任何文档或任何示例,告诉您如何获取编辑器中特定行的值 .

例如:

class Example {
    private m:number;

    public met(): string {
        return "Hello world!";
    }
}

第2行将是 private m:number; .

你如何获得该行的值,甚至是行的一部分,然后使用代码更改它的值 . 我想将该动作放入键盘快捷键 .

2 回答

  • 3

    我认为摩纳哥没有这样的内置功能,因为我没有找到它 . 但我正在使用以下代码:

    editor.addAction({
            id: 'some_id',
            label: 'label',
            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C],
            run: function(ed) {
                var position = ed.getPosition();
                var text = ed.getValue(position);
                var splitedText=text.split("\n");
                var line = splitedText[position.lineNumber-1];
    
                // now you have current line
                // you can also get any other line
                // and do something with that line
    
                splitedText[position.lineNumber-1]= _newLineText_
                ed.setValue(splitedText.join("\n"));
                ed.setPosition(position); // to return the pointer to the a position before editing text
    
                return null;
            },
            enablement: {
                textFocus: true,
            }
        });
    

    这个方法适用于小文件,但对于大文件,整个编辑器将重新突出显示并且这是一件坏事 .

  • 1

    获取一行的内容实际上非常简单:IModel.getLineContent()

    line = model.getLineContent(3);
    

    请注意,使用 getLineContent() 时,行号以1开头 .

    替换文本有点复杂,但您可以应用编辑操作:

    applyEdits 不会将编辑添加到撤消堆栈,因此不鼓励 . 但是,所有三个都使用相同的界面进行实际更改:IIdentifiedSingleEditOperation所以实际调用赢了't be very different, so I' ll只显示 pushEditOperations()

    model.pushEditOperations(
        [],
        [
            {
                forceMoveMarkers: true,
                identifier: "mychange",
                range: {
                    startLineNumber: lineNo,
                    endLineNumber: lineNo,
                    startColumn: 1,
                    endColumn: line.length + 1,
                },
                text: "this will be the new text there"
            },
        ],
        []
    );
    

    如果你想在Monaco游乐场测试它,我使用了这段代码(改编自“添加动作”示例):

    var editor = monaco.editor.create(document.getElementById("container"), {
        value: [
            '',
            'class Example {',
            '\tprivate m:number;',
            '',
            '\tpublic met(): string {',
            '\t\treturn "Hello world!";',
            '\t}',
            '}'
        ].join('\n'),
        language: "typescript"
    });
    var model = editor.getModel();
    
    editor.addAction({
        id: 'my-unique-id',
        label: 'Replace the second line',
        keybindings: [ monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10 ],
        contextMenuGroupId: 'custom',
        contextMenuOrder: 1,
        run: function(ed) {
            var lineNo = 3;
            var line = model.getLineContent(lineNo);
            console.log("These were the contents of the second line before I replaced them:", line);
            model.pushEditOperations(
                [],
                [
                    {
                        forceMoveMarkers: true,
                        identifier: "mychange",
                        range: {
                            startLineNumber: lineNo,
                            endLineNumber: lineNo,
                            startColumn: 1,
                            endColumn: line.length + 1,
                        },
                        text: "this will be the new text there"
                    },
                ],
                []
            );
        }
    });
    

    在这种情况下,您可以按以下方式运行操作:

    • 按Ctrl F10

    • 右键单击编辑器并选择"Replace the second line"(至少如果您尚未隐藏编辑器上下文菜单) .

相关问题