-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Angular and Monaco Editor version upgrade.
Breaking Change: Set relative path for loader as default to skip configurations when base-href set other then root. for other cases this can be configured.
- Loading branch information
Showing
6 changed files
with
8,256 additions
and
6,037 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,6 +4,7 @@ | |
- Angular 5: v5.x.x | ||
- Angular 6: v6.x.x | ||
- Angular 7: v7.x.x | ||
- Angular 8: v8.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. | ||
|
||
|
@@ -23,34 +24,35 @@ For angular version 6 use v6.x.x | |
npm install [email protected] --save | ||
``` | ||
|
||
Add the glob to assets in `.angular-cli.json` (to make monaco-editor lib available to the app): | ||
Add the glob to assets in `.angular-cli.json` schema - `projects.[project-name].architect.build` (to make monaco-editor lib available to the app): | ||
```typescript | ||
{ | ||
"apps": [ | ||
"options": { | ||
{ | ||
"assets": [ | ||
{ "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" } | ||
{ "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" } | ||
], | ||
... | ||
} | ||
... | ||
], | ||
}, | ||
... | ||
} | ||
``` | ||
|
||
For Angular 7+, add the glob to assets in `angular.json` schema - `projects.[project-name].architect.build` | ||
|
||
For Angular 6 and below, add the glob to assets in `angular.json` | ||
```typescript | ||
{ | ||
"options": { | ||
"apps": [ | ||
{ | ||
"assets": [ | ||
{ "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" } | ||
{ "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" } | ||
], | ||
... | ||
} | ||
... | ||
}, | ||
], | ||
... | ||
} | ||
``` | ||
|
@@ -128,6 +130,12 @@ export class AppComponent { | |
``` | ||
|
||
### Styling | ||
To match height of container element add height: 100% and wrap in container | ||
```html | ||
<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") | ||
```html | ||
<ngx-monaco-editor class="my-code-editor" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor> | ||
|
@@ -170,7 +178,7 @@ import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor'; | |
import { AppComponent } from './app.component'; | ||
|
||
const monacoConfig: NgxMonacoEditorConfig = { | ||
baseUrl: 'app-name/assets', // configure base path for monaco editor | ||
baseUrl: 'app-name/assets', // configure base path for monaco editor 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. | ||
}; | ||
|
Oops, something went wrong.