首页 文章

摩纳哥编辑Electron与AngularJS

提问于
浏览 次
0

我想让摩纳哥编辑在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)"

如果摩纳哥的loader.js不包含在脚本文件中，则一切正常 .

当我尝试包含“fs”模块时，错误出现在文件开头的一个AngularJS服务中：

var fs = require("fs");

但正如所说：没有包含monaco loader.js文件，这是正常的 .

有什么建议我可以解决这个问题吗？我想在我的Electron应用程序中包含monaco编辑器，并且最好在我的AngularJS指令和/或服务中访问它 . 与ACE编辑器相比，可以简化我的应用程序 .

javascript angularjs electron monaco-editor

4 回答

  • 0

    它看起来像 loader.js 一样覆盖了Node.js的 require 函数 . 而是直接加载html，将其作为节点模块加载 .

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

    有关详细信息，请参见vscode-loader github页面 .

    回复于
  • 0

    目前我正在使用以下方式在我的Electron应用程序中将Monaco编辑器与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 for Monaco并保存/恢复Node.js需要 .

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

    那现在工作正常 .

    然而，摩纳哥在不同语言的各种项目中的整合是屁股过程中的一个难题 . 摩纳哥团队已“确认”并正在进行整合过程 .

    回复于
  • 0

    我发现我的用例最干净的方法是将其加载到iframe中 . 这可以避免与您当前系统的所有冲突 . 您可以使用 $("#iframe-id").contentWindow.editor.getValue() 访问内容 . （注意，这假设在iframe中，您将编辑器引用存储在名为 editor 的全局变量中）

    请参阅此页面了解如何：https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-iframe

    回复于
  • 0

    我正在使用Monaco和NW.JS，所以使用编辑器的电子要求是相似的 . 这需要我在加载Monaco loader.js脚本之前保持当前上下文的require函数，因为此脚本将自定义monaco 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'), {} );
})

    我创建了一个用于创建Monaco编辑器实例的敲除绑定并将其放在GitHub上 . 它不使用node或npm包而是下载所有源 . 您可以在以下位置找到它：https://github.com/simpert/MonacoEditorKnockoutBindingHandler.git

    此外，编辑器的playground是如何使用编辑器和GitHub上的samples的示例的一个很好的来源，给出了NW.JS和Electon使用的示例 .

    回复于

相关问题