我刚刚开始调查摩纳哥,将其用作我们内部代码游乐场的编辑器。而且,无论何时通过键入,粘贴或删除更改编辑器窗口中的文本,我都无法弄清楚如何创建处理程序。对于上下文,使用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'
});
});
谢谢!
答案 0 :(得分:6)
前几天我找到了onDidChangeContent方法。
在你的例子中,你会像这样附上听众:
window.editor.model.onDidChangeContent((event) => {
render();
});
答案 1 :(得分: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对我不起作用。
答案 2 :(得分:2)
因此,任何寻找 Monaco-editor 指南的人都可以参考此官方文档。 Monaco Editor API
答案 3 :(得分:1)
要扩展吉尔的答案,有两种不同的方法,onDidChangeContent
和onDidChangeContentModel
。
onDidChangeContent
已附加到模型,并且仅适用于该模型 onDidChangeContentModel
已附加到编辑器,并且将适用于所有模型 有趣的是,您可以在多个模型上使用不同的onDidChangeContent
侦听器,将它们彼此切换出去,它们都将保留自己的onChange事件。例如,您可能有一个具有不同模型的HTML,CSS和JS编辑器。如果您想为每个监听器使用不同的onChange
监听器,则可以轻松实现。同时,您可以使用适用于所有模型的onDidChangeContentModel
进行监听。
要更新他的答案,从当前版本(0.15.6)开始,语法editor.model
不起作用。您必须使用editor.getModel()
。