Monaco-Editor in Electron mit AngularJS

Question

Ich möchte den Monaco-Editor in Electron starten. Ich habe die Elektronenbeispiele für Monaco gefunden, aber sie funktionieren nicht in meiner App.

Alles, was ich bekommen sind Fehler wie:

"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)" 

Alles funktioniert gut, wenn die loader.js von monaco nicht als Skriptdatei enthalten ist.

Der Fehler erscheint in einer meiner AngularJS Dienste am Anfang der Datei, wenn ich versuche, die „fs“ Modul enthalten:

var fs = require("fs"); 

Aber wie gesagt: ohne die Datei loader.js monaco enthalten diese funktioniert gut.

Irgendwelche Vorschläge, wie ich das beheben kann? Ich möchte den Monaco-Editor in meine Electron-App aufnehmen und in besten Fällen auf meine AngularJS-Richtlinien und/oder -Dienste zugreifen. Würde meine App im Vergleich zum ACE-Editor vereinfachen.

Answer 1

Derzeit verwende ich die folgende Art und Weise den Monaco-Editor mit AngularJS in meiner Electron-Anwendung zu integrieren:

<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> 

Mit diesen Zeilen in meinem HTML-Datei Ich bin die amdRequire für Monaco Laden und Speichern/Wiederherstellen die Node.js benötigen.

In meinem AngularJS Controller kann ich den Monaco-Editor mit den folgenden Zeilen laden:

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() { 
... 

, dass gerade jetzt in Ordnung funktioniert.

Nichtsdestotrotz ist die Integration von Monaco in verschiedene Projekte mit verschiedenen Sprachen ein schmerzlicher Prozess. Das Monaco-Team hat das "bestätigt" und arbeitet am Integrationsprozess.

Answer 2

Es sieht aus wie die Node.js 'require Funktion wird durch loader.js eins überschrieben. Lade stattdessen direkt in HTML, lade es als Knotenmodul.

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

Siehe vscode-loader github Seite für Detail.

Answer 3

Ich habe gefunden, dass der sauberste Weg für meinen Anwendungsfall ist, es in einen iframe zu laden. Das vermeidet alle Konflikte mit Ihrem aktuellen System. Sie können auf den Inhalt mit $("#iframe-id").contentWindow.editor.getValue() zugreifen. (Beachten Sie, dies setzt voraus, dass in Ihrem iframe- Sie die Editor Referenz in einem globalen var gespeichert editor genannt)

Siehe diese Seite für wie: https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-iframe

Answer 4

Ich bin mit Monaco mit NW.JS und so die Elektronen Anforderungen zur Verwendung des Editors sind ähnlich. Dies erfordert, dass ich die require-Funktion des aktuellen Kontextes vor dem Laden des Monaco loader.js-Skripts beibehalten muss, da dieses Skript den benutzerdefinierten monaco AMD-Loader auf die globale Anforderung setzt. Gleich nach dem Laden der loader.js behalte ich den Monaco-Lader in einer separaten globalen Variable, vielleicht meRequire und stelle NW.JS global require auf das, was zuerst persistiert wurde, wieder her.

<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> 

jetzt Editor-Instanzen verwenden nur die meRequire

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

ich einen Knockout geschaffen Bindung für die Erstellung von Monaco-Editor-Instanzen und legen es auf GitHub zu erstellen. Es verwendet keinen Knoten oder das npm-Paket lädt stattdessen alle Quellen herunter. Sie finden es unter: https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

Auch playground die Redaktion ist eine große Quelle für Beispiele, wie den Editor zu verwenden und die samples auf GitHub Anwendungsbeispiele NW.JS und Electon geben.