@abc.xyz/angular-monaco-editor-loader 中文文档教程

Question

????????Angular Monaco Editor Loader ????????????

使用以下命令轻松安装：

npm i @abc.xyz/angular-monaco-editor-loader

一个易于使用的 Monaco Editor Loader Service for Angular！ 只需在您的 HTML 元素中添加 *loadMonacoEditor，您就不必担心时间问题！ 如果您正在寻找 Angular 5-7，请参阅以下版本 https://github.com/leolorenzoluis/xyz.MonacoEditorLoader/releases/tag/v5.0.0 如果您正在寻找 Angular < 4 请查看以下分支 https://github.com/leolorenzoluis/xyz.MonacoEditorLoader/tree/angular-4

<div *loadMonacoEditor id="container"></div> 

使用自定义 monaco-editor 路径

<div *loadMonacoEditor="'libs/monaco-editor/vs'" id="container"></div> 

Prerequisites

• Make sure that you are serving Monaco Editor in /assets/monaco-editor/vs
• If you are using straight app.component then DO NOT USE the directive. Instead use the following code in app.component.ts

  constructor(private monaco: MonacoEditorLoaderService) {

  }

  this.monaco.isMonacoLoaded.subscribe(value => {
      if (value) {
        // Initialize monaco...
      }
    })

• If you are creating a component on top of monaco, then just use the directive *loadMonacoEditor inside your component's HTML

Using webpack

• If you are using Webpack do the following:

plugins: [
     new CopyWebpackPlugin([
         {
             from: 'node_modules/monaco-editor/min/vs',
             to: './src/assets/monaco',
         }
     ]),
 ],

使用 Angular CLI

• Modify angular.json to the following:

 "assets": [
        {
          "glob": "**/*",
          "input": "../node_modules/monaco-editor/min/",
          "output": "./assets/monaco-editor/"
        },
        {
          "glob": "**/*",
          "input": "../node_modules/monaco-editor/min-maps/",
          "output": "./assets/min-maps/"
        },
        {
          "glob": "favicon.ico",
          "input": "./",
          "output": "./"
        }
      ]

Usage

##在组件的模块或应用程序模块中 。 导入以下内容：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MonacoEditorLoaderModule, MonacoEditorLoaderService } from '@abc.xyz/angular-monaco-editor-loader';

import { AppComponent } from './app.component';
import { MonacoEditorComponent } from './monaco-editor/monaco-editor.component';

@NgModule({
  declarations: [
    AppComponent,
    MonacoEditorComponent
  ],
  imports: [
    BrowserModule,
    MonacoEditorLoaderModule <-- Insert this>
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

只需添加 *loadMonacoEditor，然后使用您计划创建自己的 monaco 组件的自定义组件。 只需添加以下内容：

<monaco-editor *loadMonacoEditor></monaco-editor>

在我要托管 Monaco Editor 的自定义组件中，我只是执行以下操作，就像我希望此时加载 Monaco 库一样：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'monaco-editor',
  templateUrl: './monaco-editor.component.html',
  styleUrls: ['./monaco-editor.component.css']
})
export class MonacoEditorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
      noSyntaxValidation: false
    });

    // compiler options
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES2016,
      allowNonTsExtensions: true
    });

    // extra libraries
    monaco.languages.typescript.javascriptDefaults.addExtraLib([
      'declare class Facts {',
      '    /**',
      '     * Returns the next fact',
      '     */',
      '    static next():string',
      '}',
    ].join('\n'), 'filename/facts.d.ts');

    var jsCode = [
      '"use strict";',
      '',
      "class Chuck {",
      "    greet() {",
      "        return Facts.next();",
      "    }",
      "}"
    ].join('\n');

    monaco.editor.create(document.getElementById("container"), {
      value: jsCode,
      language: "javascript"
    });
  }

}

就是这样！ 没有超时！ 没有那么！ 它与 Angular 中的正确流程相得益彰！

Running the demo app

确保安装了 Angular CLI！

1. Clone this repository
2. cd demo
3. ng serve

Motivation

我不想用 timeouts 或 then 来确定 Monaco 是否已加载，从而使我的组件或代码变得混乱！ 我也想在处理这类事情时利用 ReactiveJS。

在此处找到的大部分代码都不是检查摩纳哥是否已经存在的正确时机加载。

有时我会看到来自 Covalent 例如添加超时。 到处都有这么多超时！

        if (this._webview) {
            if (this._webview.send !== undefined) {
                // don't want to keep sending content if event came from IPC, infinite loop
                if (!this._fromEditor) {
                    this._webview.send('setEditorContent', value);
                }
                this.onEditorValueChange.emit(undefined);
                this.onChange.emit(undefined);
                this.propagateChange(this._value);
                this._fromEditor = false;
            } else {
                // Editor is not loaded yet, try again in half a second
                setTimeout(() => {
                    this.value = value;
                }, 500);
            }
        }

对于 Angular，请参考 samples/angular13 angular.json 和 custom-webpack.js monaco webpack 插件以启用 web workers

查看更多 https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config