MenelikV / mat-markdown-editor

Simple markdown editor for Angular Material Design

Home Page:https://mat-markdown-editor.firebaseapp.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Material Design Markdown Editor

npm version Build Status Coverage Status dependency Status devDependency Status Greenkeeper Badge

Demo

View it in action at https://mat-markdown-editor.firebaseapp.com

Edit on StackBlitz: https://stackblitz.com/edit/angular-w4tejv

Dependencies

Installation

Install above dependencies via npm.

Now install mat-markdown-editor via:

npm install --save mat-markdown-editor

Add the following to your index.html (or configure via angular-cli.json)

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for mat-markdown-editor:

map: {
  'mat-markdown-editor': 'node_modules/mat-markdown-editor/bundles/mat-markdown-editor.umd.js',
}

Once installed you need to import the main module:

import { MatMarkdownEditorModule } from 'mat-markdown-editor';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MatMarkdownEditorModule.forRoot()):

import { MatMarkdownEditorModule } from 'mat-markdown-editor';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatMarkdownEditorModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import MatMarkdownEditorModule:

import { MatMarkdownEditorModule } from 'mat-markdown-editor';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MatMarkdownEditorModule, ...], 
})
export class OtherModule {
}

Usage

import { Component } from '@angular/core';
import { MatMarkdownEditorOptions } from 'mat-markdown-editor';

@Component({
  selector: 'app-home',
  template: `
      <form #form="ngForm">
        <mat-markdown-editor
          [(ngModel)]="content"
          [options]="options"
          name="Content"
          maxlength="500"
          required>
        </mat-markdown-editor>
      </form>
  `,
})
export class HomeComponent {
  public options: MatMarkdownEditorOptions = {
    enablePreviewContentClick: false,
    resizable: true,
    showBorder: true,
    hideIcons: {},
    hideToolbar: false,
    height: '500px',
    mode: 'editor',
    toolbarColor: 'primary',
    preRender: this.preRender,
  };

  preRender(markDown: any) {
    // Here you have access to the markdown binding
    // before it is rendered
    return markDown;
  }
}

All options can be found here

$ git clone https://github.com/michaeldoye/mat-markdown-editor.git
  • link the mat-markdown-editor package
$ gulp link
  • navigate to the demo app directory
$ cd demo
  • install the dependencies
$ npm i
  • run/start/serve the app
$ npm run start

or

$ ng serve --open
  • the app is now hosted by http://localhost:4200/
  1. clone this repo
  2. Install the dependencies by running npm i
  3. build the library npm run build or gulp build
  4. Link the library gulp link
  5. Navigate to the demo app's directory
  • cd demo _ npm i _ npm start

License

Copyright (c) 2019 Michael Doye. Licensed under the MIT License (MIT)

About

Simple markdown editor for Angular Material Design

https://mat-markdown-editor.firebaseapp.com

License:MIT License


Languages

Language:JavaScript 53.9%Language:TypeScript 32.5%Language:HTML 10.6%Language:CSS 3.0%