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的摩納哥編輯

回答

相關問題