AngularJSを使ったElectronのMonaco編集者

Question

私はモナコの編集者をElectronに派遣して欲しいです。私はモナコの電子の例を見つけましたが、私のアプリでは動作しません。モナコのloader.jsは、スクリプトファイルに含まれていない場合

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

はすべてが正常に動作している：

すべて私が手のようなエラーがあります。

var fs = require("fs"); 

しかし、言ったように：

エラーは、私が「FS」モジュールを含むしようとすると、ファイルの先頭に私のAngularJSのサービスのいずれかに現れるモナコloader.jsファイルを使用せずにこれを含めますうまくいきます。

どのように修正することができますか？私は電子アプリにモナコエディタを含めることができますし、最良のケースではAngularJSの指示やサービスにアクセスすることができます。私のアプリはACEエディターと比べてシンプルになります。

Answer 1

現在、私は私の電子アプリケーションでAngularJSとモナコエディタを統合するには、次の方法を使用しています：私のHTMLファイル内にこれらの行では

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

を私はモナコのため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() { 
... 

今正常に動作しています。

しかし、さまざまな言語でさまざまなプロジェクトにモナコを統合することは、お尻のプロセスに苦労します。モナコチームはこれを「確認」し、統合プロセスを進めています。

Answer 2

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 3

私の使用例で最もクリーンな方法はiframeにロードすることです。これにより、現在のシステムとのすべての競合が回避されます。内容は$("#iframe-id").contentWindow.editor.getValue()でアクセスできます。私はNW.JSでモナコを使用しています https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-iframe

Answer 4

ので、電子：

方法については、このページを参照してください（これはあなたのiframe内に、あなたがグローバルVarのエディタ参照がeditorと呼ばれる保存されていることを前提とし、注意してください）エディタを使用するための要件は似ています。これは、Monaco loader.jsスクリプトをロードする前に、現在のコンテキストのrequire関数を永続させる必要があります。このスクリプトはカスタムモナコ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'), {}); 
}) 

に

を使用し、私はモナコエディタのインスタンスを作成するための結合ノックアウトを作成し、GitHubの上に置きました。ノードやnpmパッケージを使用するのではなく、すべてのソースをダウンロードします。 あなたがでそれを見つけることができます。https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

また、エディタのplaygroundはNW.JSとElecton使用の例を与えるGitHubの上のエディタとsamplesを使用する方法の例については、偉大な源です。