0

我想使用 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)错误时，出现找不到节点。

有谁知道我做错了什么或者我需要改变什么才能让它工作？我已经尝试了很多，但我没有正确设置编辑器。不幸的是，这些示例也对我没有帮助，因为它们包含不在存储库中的数据。

4

1 回答 1

0

JavaScript 使用范围，它们是小的执行上下文。在范围内声明的变量可以被当前范围的子范围访问（“可见”），但不能被任何外部范围访问。（请参阅Mozilla 开发人员网络上的定义和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.

于 2019-02-20T17:31:10.443 回答