2016-06-28 12 views
9

Microsoftは最近、monacoエディタ(ace/codemirrorに似ています)のソースを公開しました。 Monaco Editorの価値を入手

https://github.com/Microsoft/monaco-editor

私はそれを持って、ブラウザ内で実行されているが、それでも私はそれを保存したい場合のように、エディタの現在のテキストを取得する方法を見つけ出すことはできませんしました。

例:私のために

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
</head> 
<body> 

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> 

<script src="monaco-editor/min/vs/loader.js"></script> 
<script> 
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }}); 
    require(['vs/editor/editor.main'], function() { 
     var editor = monaco.editor.create(document.getElementById('container'),     { 
      value: [ 
       'function x() {', 
       '\tconsole.log("Hello world!");', 
       '}' 
      ].join('\n'), 
      language: 'javascript' 
     }); 
    }); 

    function save() { 
     // how do I get the value/code inside the editor? 
     var value = ""; 
     saveValueSomewhere(value);  
    } 
</script> 
</body> 
</html> 

答えて

10
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }}); 
require(['vs/editor/editor.main'], function() { 
    window.editor = monaco.editor.create(document.getElementById('container'),     { 
     value: [ 
      'function x() {', 
      '\tconsole.log("Hello world!");', 
      '}' 
     ].join('\n'), 
     language: 'javascript' 
    }); 
}); 

function save() { 
    // get the value of the data 
    var value = window.editor.getValue() 
    saveValueSomewhere(value);  
} 
1

このwindow.editor.getValue()は動作しますが、コードの下に働いていませんでした。

<div id="container" style="width:950px;height:700px;"></div> 
<script src="./monaco-editor/dev/vs/loader.js"></script> 
<script> 
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }}); 
    require(['vs/editor/editor.main'], function() { 
     var editor = monaco.editor.create(document.getElementById('container'), { 
      value: [ 
       'print "Hello World!"', 
       '# python' 
      ].join('\n'), 
      language: 'python', 
      theme: "vs-dark" 
     }); 

     function saveI() 
     { 
      getVal = editor.getValue() 
      // get the value of the data 
      alert(getVal) 
     } 
     document.getElementById('container').onclick = saveI; 

    }); 
    // Themes: vs-dark , hc-black 
    // language: text/html , javascript 
</script> 

あなたはあなたの「htmlButton」に「コンテナ」を変更し、saveI()機能にjQueryのAJAXを使用して、コードを保存することができます。

0

エディタとモデルの両方をサポート取得内容:だから、限り、あなたはあなたが内容を照会することができ、エディタやモデルへの参照を保持するよう

var editor = monaco.editor.create(...); 
var text = editor.getValue(); 

モデル:

var model = monaco.editor.createModel(...); 
var text = model.getValue(); 

あなたは差分エディタを持っている場合は、エディタにテキストを直接アクセスすることはできませんが、あなたは、個々のモデルにそれらにアクセスすることができ(すなわち、 )IStandaloneDiffEditor.getModel()を通じて:

var diffEditor = monaco.editor.createDiffEditor(...); 
var originalText = diffEditor.getModel().original.getValue(); 
var modifiedText = diffEditor.getModel().modified.getValue(); 

それとも別のエディタ(getModifiedEditor()getOriginalEditor())を通じて:

var originalText = diffEditor.getModifiedEditor().getValue(); 
var modifiedText = diffEditor.getOriginalEditor().getValue(); 

テキストの一部に興味を持っているだけの場合には、モデルもサポートしていますgetValueInRange()は、指定した範囲のテキストを開始列と終了列および行番号で区切って指定します。例:

var editor = monaco.editor.create(...); 
var model = editor.getModel(); 
var partOfTheText = model.getValueInRange({ 
    startLineNumber: 1, 
    startColumn: 2, 

    endLineNumber: 3, 
    endColumn: 10, 
}) 
関連する問題