前言

微軟之前有個項目叫做Monaco Workbench，后來這個項目變成了VS Code，而Monaco Editor就是從這個項目中成長出來的一個web編輯器，所以Monaco Editor和VS Code在編輯代碼，交互以及UI上幾乎是一摸一樣的，有點不同的是，兩者的平臺不一樣，Monaco Editor基于瀏覽器，而VS Code基于electron，所以功能上VSCode更加健全，并且性能比較強大。本文主要介紹ng-zorro 框架集成Monaco Editor實現文本比對。Monaco Editor 不僅能做文本比對，同樣可以做代碼編輯器，可以查閱《使用微軟Monaco Editor 編寫在線調試工具》。

環(huán)境及組件

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

接下來配置全局靜態(tài)資源
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 模塊文件中配置 DiffEditorModule

import { NgModule } from '@angular/core'; import { DiffEditorRoutingModule } from './diff-editor-routing.module'; import { DiffEditorComponent } from './diff-editor.component'; import { NgZorroAntdModule } from 'ng-zorro-antd'; import { CommonModule } from '@angular/common'; import { ClipboardModule } from 'ngx-clipboard'; import { FormsModule } from '@angular/forms'; import { MonacoEditorModule } from 'ngx-monaco-editor';@NgModule({imports: [CommonModule,DiffEditorRoutingModule,NgZorroAntdModule,ClipboardModule,FormsModule,MonacoEditorModule.forRoot(),],declarations: [DiffEditorComponent],exports: [DiffEditorComponent] }) export class DiffEditorModule { }

Monaco Editor 支持選擇文本語言、編輯器主題等等配置，我們同樣在頁面上也支持這些配置項動態(tài)配置，結合阿里的NG-ZORRO框架，完整代碼如下：

<div nz-row [nzGutter]="16"><div nz-col class="gutter-row" [nzSpan]="24" *ngIf="isCompared"><nz-select [(ngModel)]="selectedLang" class="lang-select ditor-config" (ngModelChange)="onChangeLanguage($event)"><nz-option *ngFor="let option of languages" [nzValue]="option" [nzLabel]="option"></nz-option></nz-select><nz-select [(ngModel)]="selectedTheme" class="lang-select ditor-config" (ngModelChange)="onChangeTheme($event)"><nz-option *ngFor="let option of themes" [nzValue]="option.value" [nzLabel]="option.name"></nz-option></nz-select><nz-switch class="ditor-config" [(ngModel)]="switchValue" [nzControl]="true" (click)="onChangeInline()" nzCheckedChildren="開啟內聯(lián)差異"nzUnCheckedChildren="關閉內聯(lián)差異"></nz-switch><button class="ditor-config" nz-button nzType="primary" (click)="onClear()">返回</button></div><div nz-col class="gutter-row diff-editor-row" [nzSpan]="24" *ngIf="isCompared"><ngx-monaco-diff-editor style="height: 100%" [options]="options" [originalModel]="originalModel" [modifiedModel]="modifiedModel"></ngx-monaco-diff-editor></div><div nz-col class="gutter-row" [nzSpan]="24" *ngIf="!isCompared"><button class="ditor-config" nz-button nzType="primary" (click)="onCompare()">比對文本</button></div><div nz-col class="gutter-row" [nzSpan]="12" *ngIf="!isCompared"><textarea nz-input placeholder="請輸入比對文本" [nzAutosize]="{ minRows: 10, maxRows: 29 }" [(ngModel)]="text1"></textarea></div><div nz-col class="gutter-row" [nzSpan]="12" *ngIf="!isCompared"><textarea nz-input placeholder="請輸入比對文本" [nzAutosize]="{ minRows: 10, maxRows: 29 }" [(ngModel)]="text2"></textarea></div> </div> import { Component, Input, OnInit, Output } from '@angular/core'; import { DiffEditorModel } from "ngx-monaco-editor"; import { Title } from '@angular/platform-browser';@Component({selector: 'app-diff-editor',templateUrl: './diff-editor.component.html',styleUrls: ['./diff-editor.component.less'] }) export class DiffEditorComponent implements OnInit {constructor(private titleService: Title) {}text1 = "";text2 = "";selectedLang = "plaintext";selectedTheme = "vs";languages = ["bat","c","coffeescript","cpp","csharp","csp","css","dockerfile","fsharp","go","handlebars","html","ini","java","javascript","json","less","lua","markdown","msdax","mysql","objective-c","pgsql","php","plaintext","postiats","powershell","pug","python","r","razor","redis","redshift","ruby","rust","sb","scss","sol","sql","st","swift","typescript","vb","xml","yaml"];themes = [{value: "vs",name: "Visual Studio"},{value: "vs-dark",name: "Visual Studio Dark"},{value: "hc-black",name: "High Contrast Dark"}];options = {theme: "vs",language: "plaintext",readOnly: true,renderSideBySide: true};originalModel: DiffEditorModel = {code: "",language: "plaintext"};modifiedModel: DiffEditorModel = {code: "",language: "plaintext"};switchValue = false;isCompared = false;public ngOnInit() {this.titleService.setTitle('碼加在線工具 - 文本比對');}onChangeLanguage(language) {this.options = Object.assign({}, this.options, {language: language});this.originalModel = Object.assign({}, this.originalModel, {language: language});this.modifiedModel = Object.assign({}, this.modifiedModel, {language: language});}onChangeTheme(theme) {this.options = Object.assign({}, this.options, { theme: theme });}onChangeInline() {this.options = Object.assign({}, this.options, {renderSideBySide: this.switchValue});this.switchValue = !this.switchValue;}onCompare() {this.originalModel = Object.assign({}, this.originalModel, {code: this.text1});this.modifiedModel = Object.assign({}, this.modifiedModel, {code: this.text2});this.isCompared = true;}onClear() {this.isCompared = false;} }

運行結果如下：

完美運行

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

總結

以上是生活随笔為你收集整理的使用微软Monaco Editor 编写代码比对工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。