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
;
Usage
Using the editor
Using the markdown viewer
Using the markdown text preview pipe
{{ markdown | ngSimpleMarkdownTextPreview }}
Using the markdown service
;
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 |