Question

我希望摩纳哥编辑能够在Electron中运行。我找到了摩纳哥的电子示例，但它们不适用于我的应用程序。

我得到的只是错误：

"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编辑器相比，我的应用程序会简化。

Answer 1

看起来像require一个节点覆盖了Node.js'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并保存/恢复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() {
...

现在工作正常。

然而，摩纳哥在不同语言的各种项目中的整合是屁股过程中的一个难题。摩纳哥团队已“确认”并正在进行整合过程。

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，所以使用编辑器的电子要求是相似的。这需要我在加载Monaco loader.js脚本之前保持当前上下文的require函数，因为此脚本将自定义monaco AMD加载程序设置为全局require。在加载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上。它不使用node或npm包而是下载所有源。您可以在以下网址找到它：https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

此外，编辑器的playground是如何使用编辑器的一个很好的来源，GitHub上的samples给出了NW.JS和Electon使用的例子。

电子与AngularJS的摩纳哥编辑

4 个答案: