前言

微软之前有个项目叫做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 微软 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 {//htmlhtmlEditorOptions = {theme: "vs-dark",language: "html",};htmlCode: string = '';//javascriptjsEditorOptions = {theme: "vs-dark",language: "javascript",};jsCode: string;//javascriptcssEditorOptions = {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;}}

运行结果如下：

完美运行

最后推荐一个比较干净实用的在线工具 https://tool.leadingcode.cn/

使用微软Monaco Editor 编写在线调试工具相关推荐

React基于monaco editor的在线代码编辑器开发
完整项目在这里:monaco-editor-app Monaco Editor App 本仓库用于演示Monoca Editor的用法运行 node 版本:14.18.1,npm 版本:6.14.1 ...
java在线编辑器_微软开源在线代码编辑器——Monaco Editor
介绍 Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代码提示,智能建议等功能.供开发人员远程更方便的编写代码.移动浏览器或移动Web框架不支持Mona ...
微软开源在线代码编辑器,编辑器天花板之Monaco Editor
各自随意彼此在意各自忙乱彼此牵挂 ------致友情文章目录常见属性配置一.自定义语言高亮 1. 注册语言 2. 定义高亮二.标记错误三.更新编辑器属性 options 四.代码智能提 ...
在线代码编辑器：Monaco Editor
monaco editor是微软开源的一款web版代码编辑器.它支持智能提示,代码高亮,代码格式化. Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代 ...
Monaco Editor API 使用范例
Monaco Editor 是微软开发的一款开源在线代码编辑器.它是 VSCode 的浏览器版本, 随着近年 VSCode 大热,Monaco Editor 也逐渐走红.目前虽未登上 Online E ...
手把手教你实现在Monaco Editor中使用VSCode主题
背景笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...
FPGA极易入门教程----工具篇（2）Quartus II 的在线调试工具 In-System Sources and Probes（ISSP）
1.什么是ISSP?ISSP有什么用? Quartus II提供了In-System Sources and Probes Editor调试工具,通过JTAG接口使用该工具可以驱动和采样内部节点的逻辑 ...
linux终端怎么设置monaco,Monaco Editor 使用指南
为什么要写这篇文章? 最近开发了一个简单的在线代码编辑器,基于 Monaco Editor 实现,没有了解过 Monaco 的人可能不知道,我们常用的 VS Code 也是基于它实现的~ 回到正题,M ...
react 中使用 Monaco Editor 编辑器
目录 Monaco Editor react 中使用安装使用方法 Webpack 配置属性获取 monac 开发示例---自定义提示自定义主题 Monaco Editor 微软之前有个项目叫 ...

使用微软Monaco Editor 编写在线调试工具

前言

环境及组件

实现

使用微软Monaco Editor 编写在线调试工具相关推荐

最新文章

热门文章