AngularJS中的monaco编辑器

时间:2018-07-10 12:46:09

标签: angularjs

我能够在AngularJS中实现monaco-editor,但是如果用户通过错误提示“未定义monaco”刷新页面monaco,这是因为monaco正在加载惰性。是否有其他方法可以立即加载monaco 。这是代码。

 resolve: {
            srcipts: function (lazyScript) {
               return lazyScript.register([
                      "monaco-editor/min/vs/loader.js",
                      "monaco-editor/min/vs/editor/editor.main.nls.js",
                      "monaco-editor/min/vs/editor/editor.main.js"
                       ]).then(function () {
                        // console.log(require);
                     require.config({ paths: { 'vs': 'monaco-editor/min/vs' } })
                         // console.log(monaco)
                         })
                     }
               }

这是我引荐的链接

Lazy-load MonacoEditor

https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-amd.md

https://microsoft.github.io/monaco-editor/playground.html

帮助我解决这个问题

2 个答案:

答案 0 :(得分:0)

这并不是您要找的答案,但是我在Angular 1.x中遇到了与monaco相同的问题。我最终在iFrame中实现了monaco。有点困难,但是它的加载要比AMD加载容易得多。

答案 1 :(得分:0)

我知道这不是理想的解决方案,但是我基本上在包装编辑器的指令中完成了以下工作。

function delayedInitialization() {
  if (typeof window.monaco === 'undefined') {
    $timeout(delayedInitialization, 200);
  } else {
    initialize();
  }
}

也许可以通过将编辑器打包为某种方式,使它可以监听各种事件,从而使这一点更清晰一些,但是现在这可以满足我们的需求。