ang-mark-down-editor

MarkDown Edior for Angular 2+

Usage no npm install needed!

<script type="module">
  import angMarkDownEditor from 'https://cdn.skypack.dev/ang-mark-down-editor';
</script>

README

Angular MarkDown Editor

downloads npm version

  • A directive for MarkDown which can be used with text area to make text area compatible for mark down support.
  • It is developed using Angular >=7.1.0 and its newly introduced ng g library schematics.
  • Library location: projects/angular-mark-down-editor directory of this repository.

Examples/Demo

angular-mark-down-editor

Installation

npm i ang-mark-down-editor

API

import { AngularMarkDownEditorModule } from 'ang-mark-down-editor';
directive: MarkDownEditor

@Inputs()

Input Type Required Description
appMarkDownEditor boolean Optional, default: true use false to hide preview pannel

@Output()

Output Type Required Description
valueChange EventEmitter() Optional returns event object 'event: { markDown: any; html: any; }'

Usage


   // Module File
   import { AngularMarkDownEditorModule } from 'ang-mark-down-editor'

   @NgModule({ 
       imports: [AngularMarkDownEditorModule]
   })

   // Component File
   import { Component } from '@angular/core';

   @Component({
     selector: 'my-app',
     template: `<textarea appMarkDownEditor (valueChange)="onValueChange($event)"></textarea>` // [appMarkDownEditor]='false' In case of hide preview
   })
   export class AppComponent  {

      onValueChange(event: { markDown: any; html: any; }) {
       console.log(event.markDown); // this will print markdown which user entered
       console.log(event.html); // this will print html output for the markdown
     }
   }

License

MIT © Vishal Hasnani

Thanks for Installing

Conatct me for any suggestion/issues -> hasnanivishal@gmail.com