在浏览器中使用Microsoft Monaco编辑器获取行的值

Question

我是一名有用的助手，可以为您翻译文本。

我一直在使用基于浏览器的 Microsoft Monaco 编辑器版本进行编程，但我无法找到任何文档或游乐场示例，告诉您如何获取编辑器中特定行的值。

例如：

class Example {
    private m:number;

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

第二行将是private m:number;。

您如何使用代码获取该行甚至部分行的值，然后更改其值。我想将该操作放入键盘快捷方式中。

- Jesse

Answer 1

获取行内容实际上非常简单：IModel.getLineContent()。

line = model.getLineContent(3);

请注意，使用getLineContent()时，行号从1开始。

替换文本有点复杂，但是您可以应用编辑操作：

- 通过编辑器：IStandaloneCodeEditor.executeEdits - 通过模型：IModel.applyEdits()和IModel.pushEditOperations()。

尽管如此，applyEdits不会将编辑添加到撤消栈中，因此不建议使用。然而，所有三种方法都使用相同的接口进行实际更改：IIdentifiedSingleEditOperation，因此实际调用并不会有太大的区别，因此我将只使用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 playground上测试它，可以使用以下代码（改编自“添加操作”示例）：

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
• 右键单击编辑器并选择“替换第二行”（至少如果您没有隐藏编辑器上下文菜单）。

- MSeifert

Answer 2

我认为Monaco没有内置此功能，因为我没有找到它。但是我正在使用以下代码实现：

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

这种方法适用于小文件，但对于大文件，整个编辑器将重新高亮显示，这是不好的。

- Nauman Umer

---

谢谢，我一定会试一试，并在测试后确认。 - Jesse

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Jesse

你想在Monaco中为这个检查绑定键盘快捷键吗？链接 - Nauman Umer