2016-06-28 25 views
9

Firma Microsoft otworzyła niedawno swój edytor monaco (podobny do asa/codemirror).Uzyskaj wartość edytora Monaco

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

Mam go i działa w przeglądarce, ale nadal nie można dowiedzieć się, w jaki sposób uzyskać aktualny tekst w edytorze, jak gdybym chciał go uratować.

Przykład:

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

Odpowiedz

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

dla mnie to window.editor.getValue() nie działał, ale poniżej kod zadziałał.

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

można zmienić „pojemnik” do „htmlButton”, a następnie zapisać kod za pomocą jQuery ajax w funkcji saveI().

0

Zarówno edytor oraz wsparcie modelu uzyskanie treść:

Tak długo, jak zachować odniesienie do edytora lub modelu można wyszukać zawartość :

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

Lub w przypadku model:

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

Jeśli masz Diff-edytor nie można uzyskać dostępu do tekstu bezpośrednio na edytorze ale można z nich korzystać na poszczególnych modelach (tj przez IStandaloneDiffEditor.getModel()):

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

lub za pośrednictwem różnych edytorów (getModifiedEditor() i getOriginalEditor()):

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

Tylko w przypadku jesteś zainteresowany w tej części tekstu, model obsługuje także getValueInRange(), która daje tekst w określonym zakresie, ograniczonym przez kolumnę początkową i końcową oraz lnianą, na przykład:

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

    endLineNumber: 3, 
    endColumn: 10, 
})