如何设置摩纳哥编辑器并更改值？

Question

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

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

Answer 1

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声明的。

如何设置摩纳哥编辑器并更改值？

问题描述

1 个解决方案

解决方案1
0 2019-02-20 17:31:10

如何设置摩纳哥编辑器并更改值？

问题描述

1 个解决方案

解决方案1 0 2019-02-20 17:31:10

解决方案1
0 2019-02-20 17:31:10