Angualr4 directive for markdown editor, wrapper by edititor.md ，original project demo
npm install --save ngx-editor.md
html
< div id = " ed " ( onComplete )= " onComplate($event) " appEditorMd [ editorConfig ]= " conf " > < / div >
Use the appEditorMd directive on the div element and must be set id ,and then you can setting the editor config use [editorConfig] ,the directive will emmit the editor instance by (onComplete) when editor create complete。
TypeScript
app.module.ts
import { BrowserModule } from ' @angular/platform-browser ' ;
import { NgModule } from ' @angular/core ' ;
import { AppComponent } from ' ./app.component ' ;
import { EditorMdModule } from ' ngx-editor.md ' ;
@ NgModule ( {
declarations : [
AppComponent ,
] ,
imports : [
BrowserModule ,
EditorMdModule
] ,
providers : [ ] ,
bootstrap : [ AppComponent ]
} )
export class AppModule {
}
component.ts
import { Component } from ' @angular/core ' ;
import { EditorConfig } from ' ngx-editor.md ' ;
@ Component ( {
selector : ' app-root ' ,
templateUrl : ' ./app.component.html ' ,
styleUrls : [ ' ./app.component.css ' ]
} )
export class AppComponent {
title = ' app ' ;
conf = new EditorConfig ( ) ;
editorInstance : any ;
onComplate ( editorInstance : any ) {
this . editorInstance = editorInstance ;
}
}
default settings
export class EditorConfig {
public width = ' 100% ' ;
public height = ' 400 ' ;
public path = ' assets/lib/ ' ;
public codeFold : true ;
public searchReplace = true ;
public toolbar = true ;
public emoji = true ;
public taskList = true ;
public tex = true ;
public readOnly = false ;
public tocm = true ;
public watch = true ;
public previewCodeHighlight = true ;
public saveHTMLToTextarea = true ;
public markdown = ' ' ;
public flowChart = true ;
public syncScrolling = true ;
public sequenceDiagram = true ;
public imageUpload = true ;
public imageFormats = [ ' jpg ' , ' jpeg ' , ' gif ' , ' png ' , ' bmp ' , ' webp ' ] ;
public imageUploadURL = ' ' ;
constructor ( ) {
}
}
Please go to the original project , click me
