Ngx-editor.md NPM

NgxEditor.Md

Angualr4 directive for markdown editor, wrapper by edititor.md ，original project demo

Installation

npm install --save ngx-editor.md

Usage

html

<div id="ed" (onComplete)="onComplate($event)" appEditorMd [editorConfig]="conf"></div>

Use the appEditorMd directive on the div element and must be set id ,and then you can setting the editor config use [editorConfig] ,the directive will emmit the editor instance by (onComplete) when editor create complete。

TypeScript

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {EditorMdModule} from 'ngx-editor.md';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    EditorMdModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

component.ts

import {Component} from '@angular/core';
import {EditorConfig} from 'ngx-editor.md';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  conf = new EditorConfig();
  editorInstance: any;

  onComplate(editorInstance: any) {
    this.editorInstance = editorInstance;
  }
}

EditorConfig

default settings

export class EditorConfig {
  public width = '100%';
  public height = '400';
  public path = 'assets/lib/';
  public codeFold: true;
  public searchReplace = true;
  public toolbar = true;
  public emoji = true;
  public taskList = true;
  public tex = true;
  public readOnly = false;
  public tocm = true;
  public watch = true;
  public previewCodeHighlight = true;
  public saveHTMLToTextarea = true;
  public markdown = '';
  public flowChart = true;
  public syncScrolling = true;
  public sequenceDiagram = true;
  public imageUpload = true;
  public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'];
  public imageUploadURL = '';

  constructor() {
  }
}