Electron与AngularJS的摩纳哥编辑

我想让摩纳哥编辑器在Electron中运行起来。我找到了摩纳哥的电子示例，但它们不适用于我的应用程序。Electron与AngularJS的摩纳哥编辑

我得到的都是这样的错误：

"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不包括作为一个脚本文件中所有工作正常。

var fs = require("fs");

但正如说：没有摩纳哥loader.js文件中包含该

当我尝试包括“FS”模块出现在我的AngularJS在文件的开始服务的一个错误工作正常。

任何建议如何解决这个问题？我想在我的Electron应用程序中包含摩纳哥编辑器，并在最好的情况下在我的AngularJS指令和/或服务中访问它。与ACE编辑器相比，将简化我的应用程序。

来源

2016-08-03 FDeitelhoff

目前我使用以下方式与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控制器我可以用下面的行加载摩纳哥编辑：

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-18 14:57:59 FDeitelhoff

它看起来像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-24 09:25:13 TNU

我认为这是不可能的。我正在使用AngularJS，稍后会实例化一些控制器和服务。我无法加载所有node.js模块。据我所知在这个时候。也许我错过了一些东西。 – FDeitelhoff

@FDeitelhoff回答已更新。让我知道如果它不起作用 – TNU

我发现我的用例最清洁的方式是将其加载到iframe中。这可以避免与您当前系统的所有冲突。您可以通过$("#iframe-id").contentWindow.editor.getValue()访问内容。（注意，这里假设你的iframe中，你存储在一个全局变量编辑参考称为editor）

看到这个页面如何：我 https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-iframe

来源

2017-08-17 19:53:17 user3413723

使用摩纳哥NW.JS等的电子使用编辑器的要求是相似的。这需要我在加载Monaco loader.js脚本之前坚持当前上下文的require操作，因为此脚本将自定义monaco AMD加载器设置为全局require。在加载loader.js之后，我将Monaco加载器保存到一个单独的全局变量中，或许我需要并恢复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'), {}); 
})

我创建了一个淘汰赛创建摩纳哥编辑器实例结合，并把它在GitHub上。它不使用节点或npm包而是下载所有的源。你可以找到它：https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

而且，编辑的playground是如何使用编辑器实例的重要来源，并在GitHub上给予的NW.JS和Electon使用实例samples。

来源

2017-11-28 23:05:36 SimperT

Electron与AngularJS的摩纳哥编辑

回答

相关问题