前言

微軟之前有個專案叫做Monaco Workbench，后來這個專案變成了VS Code，而Monaco Editor就是從這個專案中成長出來的一個web編輯器，所以Monaco Editor和VS Code在編輯代碼，互動以及UI上幾乎是一摸一樣的，有點不同的是，兩者的平臺不一樣，Monaco Editor基于瀏覽器，而VS Code基于electron，所以功能上VSCode更加健全，并且性能比較強大，本文主要介紹ng-zorro 框架集成Monaco Editor實作HTML 在線除錯器，Monaco Editor 不僅能做代碼編輯器，同樣可以做文本比對，

環境及組件

Monaco Editor 微軟 Monaco Editor 編輯器
Ant Design of Angular NG-ZORRO
ngx-monaco-editor monaco-editor angular npm 包

實作

根據 ngx-monaco-editor 檔案按angular版本安裝指定版本的npm包
注意：版本對應不上會導致資源404錯誤

• Angular <= 4: v3.x.x
• Angular 5: v5.x.x
• Angular 6: v6.x.x
• Angular 7: v7.x.x
• Angular 8: v8.x.x
• Angular 9: v9.x.x

npm install ngx-monaco-editor@6.0.0 --save

接下來配置全域靜態資源
Angular 6 之前版本 添加到.angular-cli.json檔案中

{
  "options": {
    {
      "assets": [
        { "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
      ],
      ...
    }
    ...
  },
  ...
}

Angular 6 之后版本 添加到.angular.json檔案中

{
  "apps": [
    {
      "assets": [
        { "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
      ],
      ...
    }
    ...
  ],
  ...
}

Angular 模塊檔案中配置 MonacoEditorModule

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

頁面使用tab標簽頁實作HTML、JS、CSS 多個代碼編輯器切換

<nz-tabset>
  <nz-tab nzTitle="HTML">
    <ngx-monaco-editor [options]="htmlEditorOptions" [(ngModel)]="htmlCode"></ngx-monaco-editor>
  </nz-tab>
  <nz-tab nzTitle="JAVASCRIPT">
    <ngx-monaco-editor [options]="jsEditorOptions" [(ngModel)]="jsCode"></ngx-monaco-editor>
  </nz-tab>
  <nz-tab nzTitle="CSS">
    <ngx-monaco-editor [options]="cssEditorOptions" [(ngModel)]="cssCode"></ngx-monaco-editor>
  </nz-tab>
</nz-tabset>

我以為這樣就可以完美展示三個編輯器了，可現實往往是讓人頭痛的

在 tabs 中添加多個實體竟然不行，于是我嘗試著不放在tabs中實作，結果卻是可以的，
初步估計是加載順序的問題，于是我把每個 ngx-monaco-editor 標簽 封裝成了組件，修整了一下資料獲取邏輯，完整代碼如下：

<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row code-view" [nzSpan]="12">
    <nz-tabset [nzAnimated]="true" [nzTabBarExtraContent]="extraTemplate">
      <nz-tab [nzTitle]="htmlTitleTemplate" (nzDeselect)="onDeselect()">
        <ng-template nz-tab>
          <code-view-eagerly #htmlCodeEagerly [(code)]="htmlCode" [options]="htmlEditorOptions"></code-view-eagerly>
        </ng-template>
        <ng-template #htmlTitleTemplate> <i nz-icon [nzIconfont]="'iconHTML'"></i>HTML</ng-template>
      </nz-tab>
      <nz-tab [nzTitle]="jsTitleTemplate" (nzDeselect)="onDeselect()">
        <ng-template nz-tab>
          <code-view-eagerly #jsCodeEagerly [(code)]="jsCode" [options]="jsEditorOptions"></code-view-eagerly>
        </ng-template>
        <ng-template #jsTitleTemplate> <i nz-icon [nzIconfont]="'iconJS'"></i>JAVASCRIPT</ng-template>
      </nz-tab>
      <nz-tab [nzTitle]="cssTitleTemplate"(nzDeselect)="onDeselect()">
        <ng-template nz-tab>
          <code-view-eagerly #cssCodeEagerly [(code)]="cssCode" [options]="cssEditorOptions"></code-view-eagerly>
        </ng-template>
        <ng-template #cssTitleTemplate> <i nz-icon [nzIconfont]="'iconCSS'"></i>CSS</ng-template>
      </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
      <button nz-button nzType="primary" (click)="runAllCodes()">運行代碼</button>
    </ng-template>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="12">
    <iframe class="view-panel" id="preview" frameborder="0"></iframe>
  </div>
</div>

import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
import { Component, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-code-view',
  templateUrl: './code-view.component.html',
  styleUrls: ['./code-view.component.less']
})
export class CodeViewComponent implements OnInit {
  //html
  htmlEditorOptions = {
    theme: "vs-dark",
    language: "html",
  };
  htmlCode: string = '';

  //javascript
  jsEditorOptions = {
    theme: "vs-dark",
    language: "javascript",
  };
  jsCode: string;

  //javascript
  cssEditorOptions = {
    theme: "vs-dark",
    language: "css",
  };
  cssCode: string;

  @ViewChild('htmlCodeEagerly') htmlCodeEagerly: CodeViewEagerlyComponent;
  @ViewChild('jsCodeEagerly') jsCodeEagerly: CodeViewEagerlyComponent;
  @ViewChild('cssCodeEagerly') cssCodeEagerly: CodeViewEagerlyComponent;

  ngOnInit() {
  }

  onDeselect() {
    if(this.htmlCodeEagerly!=undefined)
    {
      this.htmlCode = this.htmlCodeEagerly.getCode();
    }
    if(this.jsCodeEagerly!=undefined)
    {
      this.jsCode = this.jsCodeEagerly.getCode();
    }
    if(this.cssCodeEagerly!=undefined)
    {
      this.cssCode = this.cssCodeEagerly.getCode();
    }
  }

  runAllCodes() {
    this.onDeselect();
    console.log(this.htmlCode, this.cssCode, this.jsCode)
    var html = this.htmlCode;
    var css = this.cssCode;
    var js = this.jsCode;

    var code = "<!DOCTYPE html>\n" +
      "<html lang=\"en\">\n" +
      "<head>\n" +
      "  <meta charset=\"UTF-8\">\n" +
      "  <title>Editor</title>\n" +
      "  <style>";
    code += "\n" + css;

    code +=
      "\n  </style>\n" +
      "</head>\n" +
      "<body>\n";
    code += "\n" + html;

    code +=
      "\n  <script>\n";
    code += "\n" + js;
    code +=
      "\n  <\/script>\n" +
      "<\/body>\n" +
      "</html>";
    const preview = document.getElementById('preview')
    preview.setAttribute("srcdoc", code);
  }

}

@Component({
  selector: 'code-view-eagerly',
  template: `
  <ngx-monaco-editor style="height:650px" [options]="options" [(ngModel)]="code"></ngx-monaco-editor>
  `
})
export class CodeViewEagerlyComponent implements OnInit {
  @Input() code: any = '';
  @Input() options: any;

  ngOnInit(): void {

  }

  getCode() {
    return this.code;
  }

}

運行結果如下：

完美運行

最后推薦一個比較干凈實用的在線工具 http://tool.codeplus.vip/