ngx-markdown-editor
Angular markdown editor based on ace editor
FOR TO SUPPORT TELEGRAM FLAVOURS
Usage
Installation
Tips: This is a new way to add dependencies since 2.1.0
, and the old way is work fine too.
Install dependencies from npm repository:
npm i brace bootstrap font-awesome
Install ngx-markdown-editor
from npm repository:
npm i ngx-markdown-editor
Add the styles and scripts in angular.json
:
{
...
"architect": {
"build": {
"options": {
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
],
"scripts": [
"node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
"node_modules/ngx-markdown-editor/assets/marked.min.js"
]
...
}
}
}
...
}
Import brace
in polyfills.ts
import 'brace';
import 'brace/mode/markdown';
Sample
import { LMarkdownEditorModule } from 'ngx-markdown-editor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
LMarkdownEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<md-editor name="Content"
[upload]="doUpload"
[preRender]="preRenderFunc"
[(ngModel)]="content"
[height]="'200px'"
[mode]="mode"
[options]="options"
required
maxlength="500">
</md-editor>
Options
-
ngModel: markdown original content
-
height: editor height
-
hideToolbar: hide toolbar, default is false
-
mode: editor
| preview
, default is editor
-
options: other settings for editor
{
showPreviewPanel?: boolean
showBorder?: boolean
hideIcons?: Array<string>
usingFontAwesome5?: boolean
scrollPastEnd?: number
enablePreviewContentClick?: boolean
resizable?: boolean
markedjsOpt?: MarkedjsOption
customRender?: {
image?: Function
table?: Function
code?: Function
listitem?: Function
}
}
-
preRender(Function
): For #13, this will not effect ngModel
's value, just rendered value
preRenderFunc(content: string) {
return content.replace(/something/g, 'new value');
}
-
upload(Function
): For #24, upload file by yourself
constructor() {
this.doUpload = this.doUpload.bind(this);
}
doUpload(files: Array<File>): Promise<Array<UploadResult>> {
return Pormise.resolve([{ name: 'xxx', url: 'xxx.png', isImg: true }]);
}
interface UploadResult {
isImg: boolean
name: string
url: string
}
-
required: for form validate
-
maxlength: for form validate