Material Design Markdown Editor
Demo
View it in action at https://mat-markdown-editor.firebaseapp.com
Edit on StackBlitz: https://stackblitz.com/edit/angular-w4tejv
Dependencies
- Angular (requires Angular 2 or higher, tested with 2.0.0)
- Angular Material
Installation
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
)
SystemJS
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:
;
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()
):
; @
Other modules in your application can simply import MatMarkdownEditorModule
:
; @
Usage
;; @ public options: MatMarkdownEditorOptions = enablePreviewContentClick: false resizable: true showBorder: true hideIcons: {} hideToolbar: false height: '500px' mode: 'editor' toolbarColor: 'primary' preRender: thispreRender ; { // Here you have access to the markdown binding // before it is rendered return markDown; }
All options can be found here
Run Demo App Locally
- 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/
Development
- 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
License
Copyright (c) 2019 Michael Doye. Licensed under the MIT License (MIT)