0

我想在 Electron 中启动并运行 monaco 编辑器。我找到了摩纳哥的电子示例，但它们在我的应用程序中不起作用。

我得到的只是错误，例如：

"loader.js:1817 Uncaught Error: Unrecognized require call"

"angular.js:13920 Error: Check dependency list! Synchronous require cannot resolve module 'fs'. This is the first mention of this module! at e.synchronousRequire (loader.js:1063)"

如果 monaco 的 loader.js 不包含在脚本文件中，一切正常。

当我尝试包含“fs”模块时，该错误出现在文件开头的一个 AngularJS 服务中：

var fs = require("fs");

但如前所述：如果不包含 monaco loader.js 文件，这可以正常工作。

有什么建议我可以解决这个问题吗？我想在我的 Electron 应用程序中包含 monaco 编辑器，最好在我的 AngularJS 指令和/或服务中访问它。与 ACE 编辑器相比，会简化我的应用程序。

4

4 回答 4

0

看起来 Node.js 的require函数被loader.js一个覆盖了。而是直接在html中加载，将其作为节点模块加载。

var loader = require('loader');
loader.config({
    // ...
});
loader(['an/amd/module'], function(value) {
    // code is loaded here
});

有关详细信息，请参阅vscode-loader github 页面。

于 2016-08-24T09:25:13.110 回答
0

目前，我正在使用以下方式将 Monaco 编辑器与 AngularJS 集成到我的 Electron 应用程序中：

<script>
    var nodeRequire = global.require;
</script>

<script src="node_modules/monaco-editor/min/vs/loader.js"></script>

<script>

    var amdRequire = global.require;
    global.require = nodeRequire;

</script>

使用我的 HTML 文件中的这些行，我正在为 Monaco 加载 amdRequire 并保存/恢复 Node.js 要求。

在我的 AngularJS 控制器中，我可以使用以下行加载 Monaco 编辑器：

amdRequire.config({
    baseUrl: 'node_modules/monaco-editor/min'
});
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() {
...

现在工作正常。

然而，将摩纳哥集成到不同语言的各种项目中是一个痛苦的过程。摩纳哥团队已经“确认”了这一点，并正在着手整合过程。

于 2017-01-18T14:57:59.283 回答
0

我发现我的用例最干净的方法是将它加载到 iframe 中。这避免了与您当前系统的所有冲突。您可以使用 访问内容$("#iframe-id").contentWindow.editor.getValue()。（注意，这假设在您的 iframe 中，您将编辑器引用存储在名为 的全局变量中editor）

请参阅此页面了解如何： https ://github.com/Microsoft/monaco-editor-samples/tree/master/sample-iframe

于 2017-08-17T19:53:17.607 回答
0

我正在将 Monaco 与 NW.JS 一起使用，因此使用编辑器的 Electron 要求是相似的。这需要我在加载 Monaco loader.js 脚本之前保留当前上下文的 require 函数，因为该脚本将自定义 monaco AMD 加载器设置为全局 require。就在加载 loader.js 之后，我将 Monaco 加载器持久化到一个单独的全局变量中，也许是 meRequire 并将 NW.JS 全局 require 恢复到第一次持久化的那个。

<script type="text/javascript">
    // persist global require function before monaco loader.js overwrites it
    tempRequire = require;
</script>
<script src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js" type="text/javascript"></script>
<script type="text/javascript">
    // persist monaco's custom loader
    meRequire = require;
    // restore global require function
    require = tempRequire;
    // configure monaco's loader
    meRequire.config(
    {
        baseUrl: 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/'
    } );
</script>

现在创建编辑器实例只需使用 meRequire

meRequire( [ 'vs/editor/editor.main' ], () =>
{ 
    // create an editor instance
    let editor = monaco.editor.create( document.getElementById('elementId'), {} );
})

我创建了一个用于创建 Monaco-editor 实例的淘汰绑定并将其放在 GitHub 上。它不使用节点或 npm 包，而是下载所有源。您可以在以下位置找到它：https ://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

此外，编辑器的游乐场是如何使用编辑器的示例的重要来源，GitHub上的示例提供了 NW.JS 和 Electon 使用的示例。

于 2017-11-28T23:05:36.203 回答