Оцените преимущества редактора Monaco Editor

Microsoft недавно открыла исходный код своего редактора 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>

javascript monaco-editor
person Kyle Gobel    schedule 28.06.2016    source источник

Ответы (3)


arrow_upward
13
arrow_downward

И редактор, и модель поддерживают получение содержимого:

Итак, пока вы сохраняете ссылку на редактор или модель, вы можете запрашивать содержимое:

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

Или в случае модели:

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

Если у вас есть редактор различий, вы не можете получить доступ к тексту непосредственно в редакторе, но вы можете получить к нему доступ в отдельных моделях (например, через _ 5_):

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

На всякий случай, если вас интересует часть текста, модель также поддерживает _ 10_, который дает вам текст в указанном диапазоне, разделенный начальным и конечным столбцом и номером, например:

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

  endLineNumber: 3,
  endColumn: 10,
})
person MSeifert    schedule 15.02.2018

arrow_upward
3
arrow_downward

для меня это 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», а затем сохранить код, используя jQuery ajax в функции saveI().

person cyera    schedule 15.08.2017

arrow_upward

arrow_downward

person    schedule
comment
Есть ли способ ошибки, если содержимое редактора недействительно (ошибка линтера / синтаксиса) - person balupton; 03.12.2019
comment
Это не сработало для меня - person thesailorbreton; 28.03.2021