摩納哥用AngularJS在Electron中進行編輯

Question

我想啟動Monaco編輯器並在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

看起來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

目前，我正在使用以下方式將Monaco編輯器與AngularJS集成到我的Electron應用程序中：

<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文件中的這些行中，我正在加載Monaco的amdRequire並保存/恢復Node.js require。

在我的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 loader設置為全局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上。 它不使用節點或npm包，而是下載所有源。 您可以在以下位置找到它： https : //github.com/simpert/MonacoEditorKnockoutBindingHandler.git

另外，編輯器的操場是如何使用的編輯器和實例的重要來源樣品在GitHub上給予的NW.JS和Electon使用的例子。