Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ng-simple-markdown-editor with all npm packages installed. Try it out:

require("@angular/cdk/package.json"); // @angular/cdk is a peer dependency. require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/forms/package.json"); // @angular/forms is a peer dependency. require("@angular/material/package.json"); // @angular/material is a peer dependency. require("markdown-it/package.json"); // markdown-it is a peer dependency. require("markdown-it-task-lists/package.json"); // markdown-it-task-lists is a peer dependency. var ngSimpleMarkdownEditor = require("ng-simple-markdown-editor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng-simple-markdown-editor v1.0.30

A simple markdown editor component for Angular

npm version Build Status Known Vulnerabilities

ng-simple-markdown-editor

A simple markdown editor component for Angular 2 and up.

Demo

Stackblitz

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

TypeNameDataTypeDefault ValueDescription
Inputheightstring'400px'Define the total height of the editor element including the toolbar
InputhistoryStepsnumber10Define the number of history saved, 0 for disable
InputmentionConfigsMentionConfig[][]Define mention configs
Inputplaceholderstring''Define the placeholder of the editor
InputresizebooleantrueWhether allow user to resize this editor
OutputfilesFile[]NilEmit when files are dropped / pasted into the editor
OutputmentionSearchTermstringNilEmit when user type mention search term

NgSimpleMarkdownViewerDirective

TypeNameDataTypeDefault ValueDescription
InputmarkdownstringundefinedDefine the input markdown
InputstylesstringundefinedDefine the additional css styles
InputgetTagUrl(tag: string) => stringundefinedDefine the function for the link of #tag
OutputmentionsstringNilEmit the mention when clicked, which is username
OutputmentionWithIds[ string, string ]NilEmit the mention when clicked, the first string is userId, the second is username
OutputreadybooleanNilEmit when markdown content has loaded
OutputtagsstringNilEmit the tag string when clicked
OutputtaskListsstringNilEmit the updated markdown when clicked task list checkbox

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

MentionConfig<T>

NameDataTypeDescription
dataObservable<T[]>Array of data entries feed into mention menu
templateTemplateRefTemplate for render mention menu entry
transform(item: T) => stringTransform function used before inserting content to editor
triggerstringCharacter for trigger mention menu

MentionsSearchTerm

NameDataTypeDescription
termstringUser input search term
triggerstringTrigger character
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free