web-dev-qa-db-ja.com

Monaco Editorの「onChange」イベント？

内部コードプレイグラウンドのエディターとして使用するモナコの調査を開始しました。また、入力、貼り付け、削除など、エディターウィンドウのテキストが変更されたときのハンドラーを作成する方法がわかりません。コンテキストとして、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'
    });
});

ありがとう！

monaco-editor
6
elora

先日、 onDidChangeContent メソッドを見つけました。

あなたの例では、次のようにリスナーをアタッチします。

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

ギルの答えを拡張するために、onDidChangeContentとonDidChangeContentModelの2つの異なる方法があります。

  • onDidChangeContentはモデルに添付されており、そのモデルにのみ適用されます
  • onDidChangeContentModelはエディターに添付され、すべてのモデルに適用されます

良い点は、複数のモデルで異なるonDidChangeContentリスナーを使用し、それらを相互に切り替えることができ、それらがすべて独自のonChangeイベントを保持することです。たとえば、HTML、CSS、およびJSのさまざまなモデルを持つエディターがあるとします。それらのそれぞれに異なるonChangeリスナーが必要な場合、これは簡単に実現できます。同時に、すべてのモデルに適用されるonDidChangeContentModelを使用するリスナーを持つことができます。

彼の答えを更新するために、現在のリリース（0.15.6）の時点では、構文_editor.model_は機能しません。 editor.getModel()を使用する必要があります。

5
Benny Hinrichs

たくさん突っ込んで実験した後、私は何かを見つけました。エディターの作成とモデルを使用したエディターの作成の違いはわかりませんが（私が見たものではありません）、次のように機能します。

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だけを使用してもうまくいきませんでした。

4
elora