使用微软Monaco Editor 编写代码比对工具
前言
微软之前有个项目叫做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 编写在线调试工具》。
环境及组件
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 模块文件中配置 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 支持选择文本语言、编辑器主题等等配置,我们同样在页面上也支持这些配置项动态配置,结合阿里的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="开启内联差异"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/
使用微软Monaco Editor 编写代码比对工具相关推荐
- 使用微软Monaco Editor 编写在线调试工具
前言 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VS Code,而Monaco Editor就是从这个项目中成长出来的一个web编辑器,所以Monaco Editor和V ...
- monaco editor编辑器代码diff的实现
背景 利用monaco editor这款编辑器做代码比较,支持sql.shell.python脚本及json字符串 效果图 代码 CodeDiffEditor.vue <template> ...
- 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
MonacoEditor编辑器 (一)简介 底层vscode开发的一款编辑器,各方面的样式功能基本与vscode一致. (二)官方文档 Monaco Editor (microsoft.github. ...
- Vue3中使用Monaco Editor代码编辑器记录~持续更新
Vue3中使用Monaco Editor代码编辑器记录-持续更新 因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器 前端框架使用Vue3 + elementUI m ...
- React基于monaco editor的在线代码编辑器开发
完整项目在这里:monaco-editor-app Monaco Editor App 本仓库用于演示Monoca Editor的用法 运行 node 版本:14.18.1,npm 版本:6.14.1 ...
- Vue中使用Monaco Editor代码编辑器
一.安装依赖 npm install editor@1.0.0 npm install monaco-editor@0.19.3 npm install monaco-editor-webpack-p ...
- 手把手教你实现在Monaco Editor中使用VSCode主题
背景 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...
最新文章
- Javascript继承机制的设计思想
- 应用Java程序片段动态生成表格
- 2d的公式_西师大版六年级数学上册全册必背公式+高清版电子课文,收藏预习
- 正态分布概率表_三、统计概率思维
- 开发者论坛一周精粹(第十四期):CVE-2017-7529:Nginx敏感信息泄露
- 【洛谷P1169】[ZJOI2007]棋盘制作
- kubernetes英语怎么读_小学三年级英语怎么学
- 汇编程序16位带符号变量计算
- MSSQL优化教程之1.4 其他几种类型的页面
- CentOS mysql重置密码
- Eclipse / Spring Tool Suite 配置
- java的自省机制_深入理解Java反射机制
- 通过ajax异步请求下载文件的方法
- 水星怎么设置网速最快_设置水星无线路由器限制网速的实现方法
- VB中数组的嵌套循环
- python _foo __foo
- 我的2013----默默的积累
- MAC 苹果电脑开机密码忘了怎么办
- 光伏储能容量优化MATLAB论坛,微电网中电池储能的容量配置及优化
- ctab法提取dna流程图_CTAB法提取DNA原理及步骤、制胶、电泳