View it in action at https://mat-markdown-editor.firebaseapp.com
Edit on StackBlitz: https://stackblitz.com/edit/angular-w4tejv
- Angular (requires Angular 2 or higher, tested with 2.0.0)
- Angular Material
Install above dependencies via npm.
Now install mat-markdown-editor
via:
npm install --save mat-markdown-editor
Add the following to your index.html
(or configure via angular-cli.json
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look format-markdown-editor
:
map: {
'mat-markdown-editor': 'node_modules/mat-markdown-editor/bundles/mat-markdown-editor.umd.js',
}
Once installed you need to import the main module:
import { MatMarkdownEditorModule } from 'mat-markdown-editor';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice MatMarkdownEditorModule.forRoot()
):
import { MatMarkdownEditorModule } from 'mat-markdown-editor';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatMarkdownEditorModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import MatMarkdownEditorModule
:
import { MatMarkdownEditorModule } from 'mat-markdown-editor';
@NgModule({
declarations: [OtherComponent, ...],
imports: [MatMarkdownEditorModule, ...],
})
export class OtherModule {
}
import { Component } from '@angular/core';
import { MatMarkdownEditorOptions } from 'mat-markdown-editor';
@Component({
selector: 'app-home',
template: `
<form #form="ngForm">
<mat-markdown-editor
[(ngModel)]="content"
[options]="options"
name="Content"
maxlength="500"
required>
</mat-markdown-editor>
</form>
`,
})
export class HomeComponent {
public options: MatMarkdownEditorOptions = {
enablePreviewContentClick: false,
resizable: true,
showBorder: true,
hideIcons: {},
hideToolbar: false,
height: '500px',
mode: 'editor',
toolbarColor: 'primary',
preRender: this.preRender,
};
preRender(markDown: any) {
// Here you have access to the markdown binding
// before it is rendered
return markDown;
}
}
All options can be found here
- clone this repo by running
$ git clone https://github.com/michaeldoye/mat-markdown-editor.git
- link the mat-markdown-editor package
$ gulp link
- navigate to the demo app directory
$ cd demo
- install the dependencies
$ npm i
- run/start/serve the app
$ npm run start
or
$ ng serve --open
- the app is now hosted by
http://localhost:4200/
- clone this repo
- Install the dependencies by running
npm i
- build the library
npm run build
orgulp build
- Link the library
gulp link
- Navigate to the demo app's directory
cd demo
_npm i
_npm start
Copyright (c) 2019 Michael Doye. Licensed under the MIT License (MIT)