Monaco Editor 'onChange' event?

Question

I've just started investigating Monaco to be used as the editor for our internal code playground. And I'm unable to figure out how to create a handler for whenever the text in the editor window is changed, either by typing, pasting, or deleting. For context, using the CodeMirror editor, I simply did:

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

Here is my JavaScript that creates the basic editor:

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

Thanks!

Answer 1

I found onDidChangeContent method the other day.

In your example you would attach the listener like this:

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

Answer 2

To expand on Gil's answer, there are two different methods, onDidChangeContent and onDidChangeModelContent.

• onDidChangeContent is attached to a model, and will only apply to that model
• onDidChangeModelContent is attached to the editor and will apply to all models

The nice thing is that you can use different onDidChangeContent listeners on multiple models, switch them out with one another, and they'll all preserve their own onChange events. For example, you might have an editor with different models for HTML, CSS, and JS. If you wanted different onChange listeners for each of those, this is easily achievable. At the same time, you can have listeners using onDidChangeModelContent that will apply to all models.

To update his answer, as of the current release (0.15.6), the syntax editor.model doesn't work. You have to use editor.getModel().

Answer 3

After a lot of poking and experimenting, I did find something. I haven't figured out the difference between creating an editor and creating an editor using a model (not that I've looked), but the following works for me:

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

Using just onDidChangeContent did not work for me.