Monaco Editor 'onChange' event?

monaco-editor
elora picture elora · Feb 16, 2018 · Viewed 10.5k times · Source

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

Gil picture Gil · Feb 16, 2018

I found onDidChangeContent method the other day.

In your example you would attach the listener like this:

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

Related questions

Get the value of Monaco Editor

Microsoft recently open sourced their monaco editor (similar to ace/codemirror). https://github.com/Microsoft/monaco-editor I've got it up and running in the browser, but still can't figure out how to get the current text of the editor, like …

Read More
Monaco editor dynamically resizable

I have been searching for a discussion about if it's possible to mimic the html tag textarea's resizing when using Monaco Editor's field all over the Internet but I couldn't find one answering my question. I'm using the monaco-editor npm …

Read More
Adding JavaScript type hints for VSCode/Monaco Intellisence

Is there a way to hint to VSCode/Monaco's intellisense the types of variables. I have some code like this var loc = window.location; var gl = context1.getContext("webgl"); var ctx = context2.getContext("2d"); I see that VSCode knows that …

Read More