Skip to content

Commit

Permalink
Angular and Monaco Editor version upgrade.
Browse files Browse the repository at this point in the history
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
atu1kr committed Aug 24, 2019
1 parent 1b84305 commit 069f4c8
Show file tree
Hide file tree
Showing 6 changed files with 8,256 additions and 6,037 deletions.
26 changes: 17 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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/" }
],
...
}
...
},
],
...
}
```
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
};
Expand Down
Loading

0 comments on commit 069f4c8

Please sign in to comment.