Monaco Editor Component for Angular 2 and above.
- 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
- Angular 10: v10.x.x
- Angular 12: v12.x.x
Using this Module you can utilize the Monaco Editor as an Angular Component. Feel free to contribute, raise feature requests and make it better.
Supports all the options available in monaco-editor Monaco Editor Options
Setup
Installation
Install from npm repository:
npm install monaco-editor ngx-monaco-editor --save
For angular version 6 use v6.x.x
npm install ngx-monaco-editor@6.0.0 --save
Add the glob to assets in .angular-cli.json schema - projects.[project-name].architect.build (to make monaco-editor lib available to the app):
{
"options": {
{
"assets": [
{ "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor" }
],
...
}
...
},
...
}
For Angular 6 and below, add the glob to assets in angular.json
{
"apps": [
{
"assets": [
{ "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
],
...
}
...
],
...
}
Sample
Include MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):
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 {
}
Create Editor options in component.(eg: app.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
editorOptions = {theme: 'vs-dark', language: 'javascript'};
code: string= 'function x() {\nconsole.log("Hello world!");\n}';
}
Include editor in html with options and ngModel bindings.(eg: app.component.html)
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
Include diff-editor in html with options.(eg: app.component.html)
<ngx-monaco-diff-editor [options]="options" [originalModel]="originalModel" [modifiedModel]="modifiedModel"></ngx-monaco-diff-editor>
import { Component } from '@angular/core';
import { DiffEditorModel } from 'ngx-monaco-editor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
options = {
theme: 'vs-dark'
};
originalModel: DiffEditorModel = {
code: 'heLLo world!',
language: 'text/plain'
};
modifiedModel: DiffEditorModel = {
code: 'hello orlando!',
language: 'text/plain'
};
}
Styling
To match height of container element add height: 100% and wrap in container
<div style="height: 500px">
<ngx-monaco-editor style="height: 100%" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>
Add class to editor tag. (eg. class="my-code-editor")
<ngx-monaco-editor class="my-code-editor" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
Add styling in css/scss file:
.my-code-editor {
.editor-container {
height: calc(100vh - 100px);
}
}
Set automaticLayout option to adjust editor size dynamically. Recommended when using in modal dialog or tabs where editor is not visible initially.
Events
Output event (onInit) expose editor instance that can be used for performing custom operations on the editor.
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code" (onInit)="onInit($event)"></ngx-monaco-editor>
export class AppComponent {
editorOptions = {theme: 'vs-dark', language: 'javascript'};
code: string= 'function x() {\nconsole.log("Hello world!");\n}';
onInit(editor) {
let line = editor.getPosition();
console.log(line);
}
}
Configurations
forRoot() method of MonacoEditorModule accepts config of type NgxMonacoEditorConfig.
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';
import { AppComponent } from './app.component';
const monacoConfig: NgxMonacoEditorConfig = {
baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'
defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used
onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
MonacoEditorModule.forRoot(monacoConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Configure JSON Defaults
onMonacoLoad property of NgxMonacoEditorConfig can be used to configure JSON default.
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';
import { AppComponent } from './app.component';
export function onMonacoLoad() {
console.log((window as any).monaco);
const uri = monaco.Uri.parse('a://b/foo.json');
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: [{
uri: 'http://myserver/foo-schema.json',
fileMatch: [uri.toString()],
schema: {
type: 'object',
properties: {
p1: {
enum: ['v1', 'v2']
},
p2: {
$ref: 'http://myserver/bar-schema.json'
}
}
}
}, {
uri: 'http://myserver/bar-schema.json',
fileMatch: [uri.toString()],
schema: {
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2']
}
}
}
}]
});
}
const monacoConfig: NgxMonacoEditorConfig = {
baseUrl: 'assets',
defaultOptions: { scrollBeyondLastLine: false },
onMonacoLoad
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
MonacoEditorModule.forRoot(monacoConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Now pass model config of type NgxEditorModel to Editor Component
@Component({
selector: 'app-root',
template: `<ngx-monaco-editor [options]="options" [model]="model"></ngx-monaco-editor>`,
styles: []
})
export class AppComponent {
options = {
theme: 'vs-dark'
};
jsonCode = [
'{',
' "p1": "v3",',
' "p2": false',
'}'
].join('\n');
model: NgxEditorModel = {
value: this.jsonCode,
language: 'json',
uri: monaco.Uri.parse('a://b/foo.json')
};
}
Links
Monaco Editor
Monaco Editor Options
License
MIT © Atul Kumar
-
写在前面 欢迎关注公众号：java开发高级进阶, 有不会的可以直接公众号留言提问 monaco-editor不提供全局搜索，只提供单个文件内的搜索，那么如何实现全局搜索呢？ 环境：Nodejs + React + Dva + monaco-editor + react-monaco-editor + antd 一、绑定快捷键 调用editor.addCommand方法绑定快捷键，通过monaco.
-
this.editor.addAction({ id: "save", label: "save", keybindings: [ monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S), ], run: saveEditor,//方法 }); saveEditor(
-
我需要任何帮助与融合的monaco-editor在Angular 5应用程序。所有工作在开发模式，但在生产失败。我从loader.js收到错误。我正在使用Angular Cli和ngx-monaco-editor npm-package。包存储库-https://github.com/atularen/ngx-monaco-editor 我的一些代码： package.json: 生产错误
-
Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。描述代码编辑器功能的页面在这里。 安装： npm install monaco-editor 你将会得到 inside dev: bundled, not minified inside min: bundled, and minifi
-
介绍 我们会遇到需要编辑代码的场景，比如编辑json、javascript、python等等，Monaco Editor在新窗口打开 是一个好用而且强大的的代码编辑器库，引入Monaco Editor有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 Monaco Editor 版本是 1.9.1。 启用方式 在 package.json 中引入依赖： { "dependen
-
ngx-weui 是一个使用 Angular 构建的 WeUI 组件。 在线示例以及API文档。
-
ngx-fastdfs 是 nginx + lua +fastdfs 实现分布式图片实时动态压缩。 install 进入docker目录docker build -t fastdfs:dev . 使用 docker -idt -p 80:80 fastdfs:dev /bin/bash进入容器执行/etc/rc.local 测试 进入容器执行test目录下的./test.sh或者直接执行下面脚本
-
ngx-markdown ngx-markdown is an Angular library that combines... Marked to parse markdown to HTML Prism.js for language syntax highlight Emoji-Toolkit for emoji support KaTeX for math expression rende