AngularJS를 사용하는 Electron의 Monaco 편집자

Question

Electron에서 Monaco 편집기를 실행하고 싶습니다. 모나코의 전자 예제를 발견했지만 내 응용 프로그램에서는 작동하지 않습니다. 모나코의 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"); 

하지만 말했듯이 : 모나코 loader.js 파일없이이 포함 나는 "FS"모듈을 포함 할 때

오류는 서비스 파일의 시작 부분에서 내 AngularJS와 중 하나에 나타납니다 잘 작동합니다.

어떻게 해결할 수 있을까요? 필자는 전자 응용 프로그램에 모나코 편집기를 포함시키고 최상의 경우 AngularJS 지시문 및/또는 서비스에 액세스하려고합니다. ACE 편집기에 비해 내 앱을 단순화 할 수 있을까요?

Answer 1

현재 내 전자 응용 프로그램에서 AngularJS와 함께 모나코 편집기를 통합 할 수있는 다음과 같은 방법으로 사용하고 있습니다 :/복원 내 HTML 파일 I 모나코의 amdRequire을로드 및 저장하고있어에서 그 라인으로

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

을 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라고 저장되어 있다고 가정합니다) 편집기를 사용하기위한 요구 사항은 비슷합니다. 이 스크립트는 모나코 loader.js 스크립트를로드하기 전에 현재 컨텍스트의 require 함수를 유지해야합니다.이 스크립트는 커스텀 모나코 AMD 로더를 전역 요구 사항으로 설정합니다. loader.js를로드 한 직후에 모나코 로더를 별도의 전역 변수 (아마도 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 편집기를 사용하는 방법의 예에 대한 좋은 소스와 GitHub의이 NW.JS 및 Electon 사용의 예를들에 samples입니다.