Как настроить monaco-редактор и изменить значение? - PullRequest
Новая
       31

Как настроить monaco-редактор и изменить значение?

0 голосов
/ 19 февраля 2019

Я хочу использовать monaco-editor для просмотра разных файлов каталога.Я хочу создать редактор и динамически изменять содержимое.Но это не работает так, как я хочу.

function doSomething(val) {
  require.config({ paths: { 'vs': 'min/vs' }});
  require(['vs/editor/editor.main'], function() {
    monEditor = monaco.editor.create(document.getElementById("content"), {
      value: val,
      language: "plain",
      scrollBeyondLastLine: false,
      readOnly: true
    });
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<link type="text/css" href="min/vs/editor/editor.main.css" rel="stylesheet">

<body>
<!--- Modal start -->
<div id="content" style="height:100px; width: 100px;"> </div> <!-- Modal content -->
<!-- Modal end -->

<button onclick="doSomething('Input1')"> Change1 </button>
<button onclick="doSomething('Input2')"> Change2 </button>

<script src="min/vs/loader.js"></script>

</body>
</html>

Это мой код.В первый раз, когда я открываю модальный, все работает нормально, но монако-редактор исчезает.

Когда я пытаюсь использовать monEditor.setValue(val), появляется ошибка, что monEditor не определен.

И когда япопробуйте использовать monEditor.setModel(model) появляется ошибка, что узел не найден.

Кто-нибудь знает, что я делаю неправильно или что мне нужно изменить, чтобы он работал?Я много пробовал, но не правильно настроил редактор.К сожалению, примеры не помогают мне, потому что они включают данные, которых нет в хранилище.

1 Ответ

0 голосов
/ 20 февраля 2019

JavaScript использует области, которые представляют собой небольшие контексты выполнения.Переменные, объявленные в области видимости, могут быть доступны («видимы») для под-областей текущей области, но не для любых внешних.(См. определение в Mozilla Developer Network и в этом всеобъемлющем руководстве по областям JavaScript .)

Вы определяете переменную monEditor внутри области действия функции,вот почему вы не можете получить к нему доступ в любое время позже.Вы можете переопределить вашу функцию следующим образом: 

let monEditor;

function doSomething (val) {
    require.config ({ paths: { 'vs': 'min/vs' }});
    require (['vs/editor/editor.main'], function () {
        monEditor = monaco.editor.create (document.getElementById ("content"), {
          value: val,
          language: "plain",
          scrollBeyondLastLine: false,
          readOnly: true
        });
    });
}

Здесь monEditor определяется в глобальной области видимости, делая ее доступной для всех функций.Попытка переопределить это вызовет ошибку, потому что monEditor объявлен с let.

...