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

Question

I want to use the monaco-editor to look at different files of a directory.我想使用 monaco-editor 查看目录的不同文件。 I want to create an editor and change the content dynamically.我想创建一个编辑器并动态更改内容。 But it doesn't work the way I want it to.但它并不像我想要的那样工作。

 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>

This is my code.这是我的代码。 The first time i open the modal everything works fine but than the monaco-editor disappear.我第一次打开模态时一切正常，但摩纳哥编辑器消失了。

When i try to use monEditor.setValue(val) an error appear that monEditor is not defined.当我尝试使用monEditor.setValue(val) ，会出现 monEditor 未定义的错误。

And when i try to use monEditor.setModel(model) an error appear that the node is not found.当我尝试使用monEditor.setModel(model) ，会出现未找到节点的错误。

Does anyone know what I'm doing wrong or what I need to change to make it work?有谁知道我做错了什么或者我需要改变什么才能使它工作？ I've tried a lot, but I don't get the editor set up right.我尝试了很多，但我没有正确设置编辑器。 Unfortunately, the examples don't help me either, because they include data that is not in the repository.不幸的是，这些示例对我也没有帮助，因为它们包含了不在存储库中的数据。

Answer 1

JavaScript uses scopes, which are small contexts of execution. JavaScript 使用范围，它是执行的小上下文。 Variables declared within a scope may be accessible ("visible") to sub-scopes of the current scope, but not to any outer ones.在作用域内声明的变量可以被当前作用域的子作用域访问（“可见”），但不能被任何外部作用域访问。 (See the definition on the Mozilla Developer Network and this comprehensive guide to JavaScript's scopes .) （请参阅Mozilla 开发人员网络上的定义和JavaScript 范围的综合指南。）

You are defining your monEditor variable inside of a function scope, which is why you are not able to access it any time later.您正在函数作用域内定义monEditor变量，这就是您以后无法访问它的原因。 You can redefine your function as follows:您可以按如下方式重新定义您的函数：

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

Here monEditor is defined on the global scope, making it available to all functions.这里monEditor定义在全局范围内，使其可用于所有函数。 Trying to redeclare it will throw an error because monEditor is declared with let .尝试重新声明它会抛出错误，因为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