获取 Monaco Editor 的值

Question

获取 Monaco Editor 的值

javascriptmonaco-editor

44

微软最近开源了他们的 monaco 编辑器（类似于 ace/codemirror）。

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>

- Kyle Gobel

3个回答

22

编辑器和模型都支持获取内容：

只要保留对编辑器或模型的引用，就可以查询内容：

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,
})

- MSeifert

我知道这是一个很长的问题，因为答案已经有3年了，但你是否知道为什么我无法在“require”之外获取对编辑器的引用？如果我将它分配给一个变量（在“require”之外定义），那么当我尝试访问它时，它就会变成未定义。顺便说一句，我正在使用electron，并在renderer.js中嵌入monaco编辑器。 - Frotaur

@Frotaur 我认为你应该提出一个新问题，因为它需要更多的上下文。而且我已经好几年没有使用过 Monaco 了。 - MSeifert

没问题，我其实已经找到原因了，是因为amdloader的“require”是异步评估的，所以我在定义之前尝试访问它的引用。感谢您抽出时间来回答！ - Frotaur

3

对于我来说，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>

您可以将“container”更改为您的“htmlButton”，然后在saveI()功能中使用jQuery ajax保存代码。

- cyera

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Ho · Accepted Answer

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);     
}