Ng-simple-markdown-editor NPM

ng-simple-markdown-editor

A simple markdown editor component for Angular 2 and up.

Demo

Dependencies

Install

Using npm

npm install ng-simple-markdown-editor

Import to your module

import { NgSimpleMarkdownEditorModule } from 'ng-simple-markdown-editor';

@NgModule({
  imports: [
    NgSimpleMarkdownEditorModule, // <-- import the library into your module
  ],
})
export class AppModule {}

Usage

Using the editor

<ng-simple-markdown-editor name="markdown" [(ngModel)]="markdown" (files)="upload($event)" (mentionSearchTerm)="search($event)"></ng-simple-markdown-editor>

Using the markdown viewer

<iframe ngSimpleMarkdownViewer [markdown]="markdown" (ready)="ready()" (mentions)="mentions($event)" (tags)="tags($event)" (taskLists)="taskLists($event)"></iframe>

Using the markdown text preview pipe

<div>{{ markdown | ngSimpleMarkdownTextPreview }}</div>

Using the markdown service

import { NgSimpleMarkdownEditorService } from 'ng-simple-markdown-editor';

@Component({
  ...
})
export class DemoComponent {

  public constructor(private ngSimpleMarkdownEditorService: NgSimpleMarkdownEditorService) {}

  public parseMarkdown(markdown: string): string {
    return this.ngSimpleMarkdownEditorService.parse(markdown);
  }

}

Configuration

NgSimpleMarkdownEditorComponent

Type	Name	DataType	Default Value	Description
Input	height	string	`'400px'`	Define the total height of the editor element including the toolbar
Input	historySteps	number	`10`	Define the number of history saved, `0` for disable
Input	mentionConfigs	MentionConfig[]	`[]`	Define mention configs
Input	placeholder	string	`''`	Define the placeholder of the editor
Input	resize	boolean	`true`	Whether allow user to resize this editor
Output	files	File[]	`Nil`	Emit when files are dropped / pasted into the editor
Output	mentionSearchTerm	string	`Nil`	Emit when user type mention search term

NgSimpleMarkdownViewerDirective

Type	Name	DataType	Default Value	Description
Input	markdown	string	`undefined`	Define the input markdown
Input	styles	string	`undefined`	Define the additional css styles
Input	getTagUrl	(tag: string) => string	`undefined`	Define the function for the link of `#tag`
Output	mentions	string	`Nil`	Emit the mention when clicked, which is `username`
Output	mentionWithIds	string, string	`Nil`	Emit the mention when clicked, the first string is `userId`, the second is `username`
Output	ready	boolean	`Nil`	Emit when markdown content has loaded
Output	tags	string	`Nil`	Emit the tag string when clicked
Output	taskLists	string	`Nil`	Emit the updated markdown when clicked task list checkbox

For the mentions, the accepted formats are @(userId|user.name) or @user.name.

MentionConfig\<T>

Name	DataType	Description
data	Observable<T[]>	Array of data entries feed into mention menu
template	TemplateRef	Template for render mention menu entry
transform	(item: T) => string	Transform function used before inserting content to editor
trigger	string	Character for trigger mention menu