Reputation: 479
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
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
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 modelonDidChangeModelContent
is attached to the editor and will apply to all modelsThe 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
Reputation: 1262
So, anyone looking for a guide on Monaco-editor can refer to this official document. Monaco Editor API
Upvotes: 0
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