2.0.0-beta.7 • Published 3 years ago
@ymchun/ngx-markdown-editor v2.0.0-beta.7
@ymchun/ngx-markdown-editor
A simple markdown editor component for Angular 2 and up.
Demo
Dependencies
Install
Using npm
npm install @ymchun/ngx-markdown-editor
Import to your module
import { NgxMarkdownEditorModule } from '@ymchun/ngx-markdown-editor';
@NgModule({
imports: [
NgxMarkdownEditorModule, // <-- import the library into your module
],
})
export class AppModule {}
Usage
Using the editor
<ngx-markdown-editor name="markdown" [(ngModel)]="markdown" (files)="upload($event)" (mentionSearchTerm)="search($event)"></ngx-markdown-editor>
Using the markdown viewer
<iframe ngxMarkdownViewer [markdown]="markdown" (ready)="ready()" (mentions)="mentions($event)" (tags)="tags($event)" (taskLists)="taskLists($event)"></iframe>
Using the markdown text preview pipe
<div>{{ markdown | ngxMarkdownTextPreview }}</div>
Using the markdown service
import { NgxMarkdownEditorService } from '@ymchun/ngx-markdown-editor';
@Component({
...
})
export class DemoComponent {
public constructor(private ngxMarkdownEditorService: NgxMarkdownEditorService) {}
public parseMarkdown(markdown: string): string {
return this.ngxMarkdownEditorService.parse(markdown);
}
}
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 |
2.0.0-beta.7
3 years ago
2.0.0-beta.4
3 years ago
2.0.0-beta.3
3 years ago
2.0.0-beta.2
3 years ago
1.0.4
3 years ago
2.0.0-beta.1
3 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago