CODEWITHSUNDEEP
monaco-editor
elora
elora

Reputation: 479

Monaco Editor 'onChange' event?

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!

Upvotes: 26

Views: 31910

Answers (4)

Gil
Gil

Reputation: 511

I found onDidChangeContent method the other day.

In your example you would attach the listener like this:

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

Upvotes: 34

Benny Hinrichs
Benny Hinrichs

Reputation: 1646

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().

Upvotes: 28

Himanshu Shekhar
Himanshu Shekhar

Reputation: 1262

So, anyone looking for a guide on Monaco-editor can refer to this official document. Monaco Editor API

Upvotes: 0

elora
elora

Reputation: 479

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.

Upvotes: 15

Related Questions