NgxMatMarkdownTextEditor

Angular markdown editor based on Angular material textarea. The goal of this library is to provide a markdown text editor which sweets the Angular Material Design.

• Library location : projects/ngx-mat-markdown-text-editor directory of this repository.
• Working example location : projects/demo directory of this repository.

Demo

• Working example location : projects/demo directory of this repository.
• Stackblitz

Installation

npm i ngx-mat-markdown-text-editor

API

import { NgxMatMarkdownTextEditorModule } from 'ngx-mat-markdown-text-editor'
selector: ngx-mat-markdown-text-editor

@Inputs()

Input	Type	Required	Description
rows	number	Optional
appearance	MatFormFieldAppearance	Optional	The form-field appearance style.
matAutosize	boolean	Optional, default: false	Whether autosizing is enabled or not
readonly	boolean	Optional, default: false	Whether the element is readonly.
placeholder	string	Optional	The placeholder for this control.
matAutosizeMaxRows	number	Optional
livePreviewEnabled	boolean	Optional, default: false	Whether the live preview is enabled or not
hideLivePreviewButton	boolean	Optional, default: false	Whether preview toggle button is displayed or not

@Outputs()

Output	Description
reset	Emits when when the user resets a form.
change	Emits when the contents of the editor or selection have changed.
select	Emits when the current selection changes.
focus	Emits when the editor receives focus.
touched	Emits when the user touches the editor.

Usage

1. Import the NgxMatMarkdownTextEditorModule in your app module.

import { NgxMatMarkdownTextEditorModule } from 'ngx-mat-markdown-text-editor'

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button'; 
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import {NgxMatMarkdownTextEditorModule} from 'ngx-mat-markdown-text-editor.module';
 
import { AppComponent } from './app.component'; 
 
@NgModule({
 declarations: [AppComponent],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   FormsModule,
   ReactiveFormsModule,
   NgxMatMarkdownTextEditorModule,
   MatInputModule,
   MatButtonModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {}

1. Use the editor (NgxMatMarkdownTextEditor) in your component.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h3>NgxMatMarkdownTextEditor</h3>
      <form [formGroup]="formGroup" (ngSubmit)="submit()">
        <ngx-mat-markdown-text-editor formControlName="text" appearance="outline" matAutosize [livePreviewEnabled]="true"
                                      rows="5" (change)="change($event)"></ngx-mat-markdown-text-editor>
        <button mat-button type="submit" color="accent">Submit</button>
      </form>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 
  constructor() {}
 
  formGroup: FormGroup;
 
  ngOnInit() {
    this.formGroup = new FormGroup({ text: new FormControl('') });
  }
 
  submit(): void {
    console.log(this.formGroup.value)
  }
 
}

References

• https://github.com/lon-yang/ngx-markdown-editor
• https://jfcere.github.io/ngx-markdown/
• https://ghiscoding.github.io/angular-markdown-editor/#/reactive-editor
• https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Build

Run ng build ngx-mat-markdown-text-editor to build the library. The build artifacts will be stored in the dist/ngx-mat-markdown-text-editor directory. Use the --prod flag for a production build.

Running unit tests

Run ng test ngx-mat-markdown-text-editor to execute the unit tests via Karma.

Credits

This project is based on ngx-markdown and inspired from ngx-markdown-editor.