前言有一个叫Monaco Workbench的项目。 之后，这个项目变成了vs代码。 而且，因为Monaco Editor是从这个项目中成长起来的web编辑器，所以Monaco Editor和VS Code正在编辑代码、交互组件和UI。 稍微不同的是，两者的平台不同。 由于Monaco Editor以浏览器为基础，VS Code以electron为基础，所以从功能上来说VS Code更健全，性能也更高。 本文主要介绍基于ng-zorro框架集成Monaco编辑器的文本匹配。 Monaco Editor不仅可以创建文本归类，还可以创建代码编辑器，并引用《使用微软Monaco Editor 编写在线调试工具》。
环境和组件monacoeditormicrosoftmonacoeditor编辑器
Ant Design of Angular NG-ZORRO
ngx-Monaco-editor Monaco-editorangularnpm软件包
npm软件包注意：版本对应不上会导致资源404错误
angular=4: v3.x.x angular 5: v5. x.x angular 63360 v6. x.x angular 73360 v7. x.x angular 8: v8. x.x angular 9990
接下来，配置全局静态资源
Angular 6之前的版本已添加到. angular-cli.json文件中
{ ' options ' : } { ' assets ' : [ { ' glob ' : ' * */* }，' input ' : ' node _ modules/ngx-Monaco-ee }
{ ' apps ' : [ { ' assets ' : ] { ' glob ' : ' * */* '，' input ' : ' ./node _ modules/ngx-Monaco-}
import { ng module } from ' @ angular/core '； 导入{ diffeditorroutingmodule } from './diff-editor-routing.module '； 导入{ diffeditorcomponent } from './diff-editor.com ponent '； 导入{ ngzorroantdmodule } from ' ng-zorro-antd '； import { common module } from ' @ angular/common '； 导入{ clipboard module } from ' ngx-clipboard '； import { forms module } from ' @ angular/forms '； 导入{ monacoeditormodule } from ' ngx-Monaco-editor '； @ ng module (imports : [公共模块，DiffEditorRoutingModule，NgZorroAntdModule，ClipboardModule，FormsModule， monoroantdmodule eclarations : [ diffeditorcomponent ]，exports : [ diffeditorcomponent ] } exportclassdifeditormodule
div NZ-row [ NZ gutter ]=' 16 ' div NZ-col class=' gutter-row ' [ NZ span ]=' 24 ' * ngif=' is compared ' NZ-select
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="开启内联差异" nzUnCheckedChildren="关闭内联差异"></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/