@ymchun/ngx-markdown-editor

A simple markdown editor component for Angular 2 and up.

Demo

Stackblitz

Dependencies

• markdown-it-task-lists
• markdown-it

Install

Using npm

npm install @ymchun/ngx-markdown-editor

Import to your module

1import { NgxMarkdownEditorModule } from '@ymchun/ngx-markdown-editor';
2
3@NgModule({
4  imports: [
5    NgxMarkdownEditorModule, // <-- import the library into your module
6  ],
7})
8export class AppModule {}

Usage

Using the editor

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

Using the markdown viewer

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

Using the markdown text preview pipe

1<div>{{ markdown | ngxMarkdownTextPreview }}</div>

Using the markdown service

1import { NgxMarkdownEditorService } from '@ymchun/ngx-markdown-editor';
2
3@Component({
4  ...
5})
6export class DemoComponent {
7
8  public constructor(private ngxMarkdownEditorService: NgxMarkdownEditorService) {}
9
10  public parseMarkdown(markdown: string): string {
11    return this.ngxMarkdownEditorService.parse(markdown);
12  }
13
14}

Configuration

NgxMarkdownEditorComponent

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

NgxMarkdownViewerDirective

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

MentionsSearchTerm

Name	DataType	Description
term	string	User input search term
trigger	string	Trigger character