使用 AngularJS 的 Electron 摩纳哥编辑器

Question

我想在 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)"

如果不将摩纳哥的 loader.js 作为脚本文件包含在内，一切正常。

当我尝试包含 "fs" 模块时，错误出现在我的 AngularJS 服务之一的文件开头：

var fs = require("fs");

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

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

Answer 1

看起来 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 页面。

Answer 2

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

<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 文件中的这些行，我正在加载摩纳哥的 amdRequire 和 saving/restoring 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() {
...

现在一切正常。

然而，将 Monaco 集成到使用不同语言的各种项目中是一个棘手的过程。摩纳哥团队 "confirmed" 正在处理整合过程。

Answer 3

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

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

Answer 4

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

<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 编辑器实例的敲除绑定并将其放在 GitHub 上。它不使用节点或 npm 包，而是下载所有源。您可以在以下位置找到它：https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

另外，小编在GitHub上的playground is a great source for examples of how to use the editor and the samples给出了NW.JS和Electon使用的例子

使用 AngularJS 的 Electron 摩纳哥编辑器

Monaco editor in Electron with AngularJS

javascript

angularjs

electron

monaco-editor