Monaco编辑器的'onChange'事件是什么？

Question

我刚刚开始调查使用 Monaco 作为我们内部代码游乐场的编辑器。但我无法弄清楚如何创建一个处理程序，以便每当编辑窗口中的文本通过键入、粘贴或删除更改时都会被触发。为了提供背景，我只需使用 CodeMirror 编辑器：

editor.on('change', function(editor, change) {
    render();
});

这是我的JavaScript代码，用于创建基本的编辑器：

    require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() 
{
    window.editor = monaco.editor.create(document.getElementById('editor'),                 
    {
        value: [
            'var canvas = document.getElementById("playground");',
            'var ctx = canvas.getContext("2d");',
            'ctx.fillStyle = "#FF00FF";',
            'ctx.fillRect(0,0,150,75);',
        ].join('\n'),
        language: 'javascript'
    });
});

谢谢！

- elora

Answer 1

前几天我发现了 onDidChangeContent 方法。

在你的例子中，你可以像这样添加监听器：

window.editor.getModel().onDidChangeContent((event) => {
  render();
});

- Gil

---

谢谢！我终于找到了适用的onDidChangeContentModel。在我的情况下，onDidChangeContent本身并不起作用。 - elora

区别在于一个是编辑器的方法，另一个是模型的方法。请注意，在我的示例中，该方法是在window.editor.model上调用的。 - Gil

这个已经过时了，最新版本使用 editor.getModel().onDidChangeContent，现在它可以正常工作。 - dv1729

@dv1729的解决方案对我来说并没有直接起作用，但将其更改为editor.getModels()[0].onDidChangeContent确实有效。 - Shan Eapen Koshy

Answer 2

在Gil的回答上补充一下，有两种不同的方法：onDidChangeContent和onDidChangeModelContent。

• onDidChangeContent附加到一个模型上，仅适用于该模型
• onDidChangeModelContent附加到编辑器上，将适用于所有模型

好处是你可以在多个模型上使用不同的onDidChangeContent监听器，随时切换它们，并且它们都会保留自己的onChange事件。例如，您可能有一个编辑器，其中包含HTML、CSS和JS的不同模型。如果您希望为每个模型设置不同的onChange监听器，这很容易实现。同时，您可以使用onDidChangeModelContent的监听器应用于所有模型。

更新他的答案，截至当前版本（0.15.6），语法editor.model不起作用。您必须使用editor.getModel()。

- Benny Hinrichs

---

它是onDidChangeModelContent，而不是onDidChangeContentModel。 - Markus Weninger

@MarkusWeninger 我以为我做错了什么，直到看到你的评论。我已经编辑了答案并修正了拼写错误。 - Daniel Loureiro

我想指出这不是打字错误。这是2019年1月版本的正确写法，但由于Monaco尚未发布1.0版本，他们可以随时更改API。 - Benny Hinrichs

Answer 3

经过许多的探索和实验，我找到了一些东西。虽然我还没有弄清楚创建编辑器和使用模型创建编辑器之间的区别（我也没去看），但以下方法对我有效：

var monEditor;
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() 
{
    monEditor = monaco.editor.create(document.getElementById('editor'),                 
    {
        value: [
            'var canvas = document.getElementById("playground");',
            'var ctx = canvas.getContext("2d");',
            'ctx.fillStyle = "#FF00FF";',
            'ctx.fillRect(0,0,150,75);',
        ].join('\n'),
        language: 'javascript'
    });
    monEditor.onDidChangeModelContent(function (e) {
        render();
    });
});

仅使用onDidChangeContent对我没有起作用。

- elora

Answer 4

因此，任何想要了解Monaco编辑器的指南的人都可以参考这份官方文件。 Monaco Editor API

- Himanshu Shekhar