src/app/markdown/markdown-editor/markdown-editor.component.ts
This component contains a monaco markdown editor with syntax highlighting
| selector | app-markdown-editor |
| styleUrls | ./markdown-editor.component.scss |
| templateUrl | ./markdown-editor.component.html |
Properties |
Methods |
Inputs |
Outputs |
| code | |
Type : string
|
|
|
This code is initially displayed in the editor |
|
| codeChange | |
Type : EventEmitter
|
|
|
Necessary for communicating changes to the parent when changes have been made to the code in the editor. |
|
| codeDidChange |
codeDidChange()
|
|
Send changes in the editor to the parent component over the EventEmitter
Returns :
void
|
| editorOptions |
Type : object
|
Default value : {theme: 'vs', language: 'markdown'}
|
|
necessary options for usage of ngx-monaco-editor |
import {Component, EventEmitter, Input, Output} from '@angular/core';
/**
* This component contains a monaco markdown editor with syntax highlighting
*/
@Component({
selector: 'app-markdown-editor',
templateUrl: './markdown-editor.component.html',
styleUrls: ['./markdown-editor.component.scss']
})
export class MarkdownEditorComponent {
/**
* necessary options for usage of ngx-monaco-editor
*/
editorOptions = {theme: 'vs', language: 'markdown'};
/**
* This code is initially displayed in the editor
*/
@Input() code: string;
/**
* Necessary for communicating changes to the parent when changes have been made to the code in the editor.
*/
@Output() codeChange = new EventEmitter<string>();
/**
* Send changes in the editor to the parent component over the EventEmitter
*/
codeDidChange(): void {
this.codeChange.emit(this.code);
}
}
<div class="editorContainer">
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code" (ngModelChange)="codeDidChange()"></ngx-monaco-editor>
</div>
./markdown-editor.component.scss
.editorContainer {
margin-bottom: 20px;
border-color: #e6e6e6;
border-style: solid;
border-width: 1px;
border-radius: 6px;
}
.preview {
white-space: pre-wrap;
}