angular7 中如何使用自己的monaco編輯器（vscode）

vscode 是一款很裝逼的編輯器，如果將其移至進到web瀏覽器就更牛逼了。

參考 https://github.com/materiahq/ngx-monaco-editor

ng new monaco-editor-demo
cd monaco-eidtor-demo
# 開始安裝
npm install @materia-ui/ngx-monaco-editor --save

# 添加資源
{
    ...
    "projects": {
      "YOUR_APP_NAME": {
          ...
          "architect": {
              "build": {
                ...
                "options": {
                    ...
                    "assets": [
                        { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor/" }
                    ],
                    ...
                }
                ...
              }
            }
            ...
        }
    },
    ...
}

開始導入主模塊的功能包。（app.module.ts）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MonacoEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

開始自己的componment。(app.component.ts)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: string = 'function x() {\nconsole.log("Hello world!");\n}';
  originalCode: string = 'function x() { // TODO }';
}

開始自己的html。

<ngx-monaco-editor style="height:80em" [options]="editorOptions" [(code)]="code"></ngx-monaco-editor>

來看看效果吧。

那怎麼將編輯器中的內容抓下來呢？對，就是code了。 [(code)]="code"

// 加上這句提交代碼

submit(): void {
    console.log(this.code);
}

看看效果