2016-06-28 15 views
9

Microsoft gần đây đã mở nguồn gốc trình soạn thảo monaco của họ (tương tự như ace/codemirror).Nhận giá trị của Monaco Editor

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

Tôi đã có nó lên và chạy trong trình duyệt, nhưng vẫn không thể tìm ra cách để có được những văn bản hiện hành của biên tập viên, như thế nào nếu tôi muốn lưu nó.

Ví dụ:

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

Trả lời

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

cho tôi window.editor.getValue() này đã không làm việc nhưng bên dưới đang làm việc.

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

bạn có thể thay đổi 'vùng chứa' thành 'htmlButton' và sau đó lưu mã bằng cách sử dụng jQuery ajax trong hàm saveI().

0

Cả hai trình biên tập và sự ủng hộ mô hình nhận được các nội dung:

Vì vậy, miễn là bạn giữ một tham chiếu đến các biên tập hoặc mô hình mà bạn có thể truy vấn các nội dung :

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

Hoặc trong trường hợp mô hình:

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

Nếu bạn có một diff-editor bạn không thể truy cập nội dung trực tiếp trên biên tập nhưng bạn có thể truy cập chúng trên các mô hình cá nhân (ví dụ: qua IStandaloneDiffEditor.getModel()):

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

Hoặc thông qua các biên tập viên khác nhau (getModifiedEditor()getOriginalEditor()):

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

Chỉ trong trường hợp bạn đang quan tâm đến một phần của văn bản, mô hình cũng hỗ trợ getValueInRange() cung cấp cho bạn văn bản trong một phạm vi được chỉ định, được phân tách bằng cột bắt đầu và kết thúc và lanh đo lường, ví dụ:

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

    endLineNumber: 3, 
    endColumn: 10, 
}) 
Các vấn đề liên quan