2016-06-28 19 views
9

Microsoft ha recentemente aperto il proprio editor monaco (simile a ace/codemirror).Ottieni il valore di Monaco Editor

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

ce l'ho installato e funzionante nel browser, ma ancora non riesco a capire come ottenere il testo attuale del l'editor, come se volevo salvarlo.

Esempio:

<!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> 

risposta

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

per me questo window.editor.getValue() non ha funzionato, ma sotto il codice ha funzionato.

<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> 

si può cambiare 'contenitore' per il tuo 'HtmlButton' e quindi salvare il codice utilizzando jQuery Ajax nella funzione saveI().

0

Sia l'editore e il supporto modello che ottiene il contenuto:

Quindi, fintanto che si mantiene un riferimento al direttore o il modello è possibile interrogare il contenuto :

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

O in caso di il modello:

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

Se si dispone di un diff-editore non è possibile accedere al testo direttamente sul editor di ma è possibile accedere ai singoli modelli (vale a dire attraverso IStandaloneDiffEditor.getModel()):

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

o attraverso i diversi editor (getModifiedEditor() e getOriginalEditor()):

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

Nel caso in cui siete interessati in una parte del testo, il modello supporta anche getValueInRange() che fornisce il testo in un intervallo specificato, delimitato da una colonna iniziale e finale e un numero di telefono, ad esempio:

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

    endLineNumber: 3, 
    endColumn: 10, 
})