Neutron Polarization Manipulator
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

ng-simple-markdown-editor

1.0.29 • Public • Published

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

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

MentionsSearchTerm

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

Install

npm i ng-simple-markdown-editor

DownloadsWeekly Downloads

288

Version

1.0.29

License

MIT

Unpacked Size

709 kB

Total Files

46

Last publish

Collaborators

  • avatar