摩纳哥编辑'onChange'活动？

Question

我刚刚开始调查摩纳哥,将其用作我们内部代码游乐场的编辑器.而且无论何时通过键入,粘贴或删除,编辑器窗口中的文本都会被更改,我无法弄清楚如何创建处理程序.对于上下文,使用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'
    });
});

谢谢!

Answer 1

为了扩展 Gil 的答案，有两种不同的方法，onDidChangeContent和onDidChangeModelContent。

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

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

要更新他的答案，从当前版本（0.15.6）开始，语法editor.model不起作用。你必须使用editor.getModel().

Answer 2

经过大量的探索和试验，我确实找到了一些东西。我还没有弄清楚创建编辑器和使用模型创建编辑器之间的区别（不是我看过的），但以下对我有用：

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 对我不起作用。

Answer 3

前几天我找到了onDidChangeContent方法.

在您的示例中,您将像这样附加侦听器:

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